javascript - 设置数据内容并显示弹出窗口

Question

我正在尝试使用 jquery 的 ajax 从资源中获取数据，然后我尝试使用此数据来填充 Bootstrap 弹出窗口，如下所示:

$('.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 属性)。如果我将 alert() 放入 success 回调中，它将显示返回的数据。

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

Answer 1

在您的成功回调中，this 不再绑定(bind)到与 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 .