[英]Setting data-content and displaying popover
我正在尝试使用jquery的ajax从资源中获取数据然后我尝试使用此数据来填充引导弹出窗口,如下所示:
$('.myclass').popover({"trigger": "manual", "html":"true"});
$('.myclass').click(get_data_for_popover_and_display);
并且检索数据的功能是:
get_data_for_popover_and_display = function() {
var _data = $(this).attr('alt');
$.ajax({
type: 'GET',
url: '/myresource',
data: _data,
dataType: 'html',
success: function(data) {
$(this).attr('data-content', data);
$(this).popover('show');
}
});
}
发生的事情是当我点击时弹出窗口没有显示,但是如果我稍后悬停元素它将显示弹出窗口,但没有内容( data-content
属性)。 如果我在success
回调中放置一个alert()
,它将显示返回的数据。
知道为什么会这样吗? 谢谢!
在您的成功回调中, this
不再绑定到与get_data_for_popover_and_display()
的其余部分相同的值。
别担心! this
关键字很毛茸茸; 误解其价值是JavaScript中的一个常见错误。
您可以通过保持一个参考解决这个this
将其分配给一个变量:
get_data_for_popover_and_display = function() {
var el = $(this);
var _data = el.attr('alt');
$.ajax({
type: 'GET',
url: '/myresource',
data: _data,
dataType: 'html',
success: function(data) {
el.attr('data-content', data);
el.popover('show');
}
});
}
或者你可以写var that = this;
到处使用$(that)
。 更多的解决方案和背景在这里 。
除了上面的答案,不要忘记根据$ .ajax()文档,你可以使用context参数来实现相同的结果,而不需要额外的变量声明:
get_data_for_popover_and_display = function() {
$.ajax({
type: 'GET',
url: '/myresource',
data: $(this).attr('alt'),
dataType: 'html',
context: this,
success: function(data) {
$(this).attr('data-content', data);
$(this).popover('show');
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.