7

我正在尝试使用 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回调中放置一个，它将显示返回的数据。

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

4

2 回答 2

15

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

于 2011-11-09T15:47:05.770 回答
6

除了上面的答案，不要忘记根据$.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');
         }
    });
}
于 2012-08-31T10:13:18.210 回答