Question

我正在尝试使用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属性）。如果我在alert()回调中放置success，它将显示返回的数据。

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

Answer 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)并在任何地方使用{{1}}。更多解决方案和背景here。

Answer 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');
         }
    });
}

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

2 个答案: