设置数据内容并显示弹出框答案

【问题标题】：Setting data-content and displaying popover设置数据内容并显示弹出框
【发布时间】：2011-12-25 10:09:05
【问题描述】：

我正在尝试使用 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()，它将显示返回的数据。

知道为什么会这样吗？谢谢！

【问题讨论】：

function { 应该是 function() { — 这会影响什么吗？
没有，只是忘了加括号。已在示例中修复，谢谢

标签： javascript jquery twitter-bootstrap

【解决方案1】：

在您的成功回调中，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)。更多解决方案和背景here.

【讨论】：

太好了，您不仅向我展示了如何修复它，还向我展示了它为什么不起作用。谢谢！
我有时使用 $this 作为我的变量名。
如果我不想在“el.attr('data-content', data)”中使用“attr”，那么解决方案是什么？可以使用“数据（'内容'，响应）”吗？

【解决方案2】：

除了上面的答案，别忘了根据$.ajax() documentation你可以使用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');
         }
    });
}

【讨论】：