Javascript 设置数据内容并显示弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8067321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting data-content and displaying popover
提问by licorna
I'm trying to get data from a resource with jquery's ajax and then I try to use this data to populate a bootstrap popover, like this:
我正在尝试使用 jquery 的 ajax 从资源中获取数据，然后尝试使用此数据来填充引导程序弹出窗口，如下所示：
$('.myclass').popover({"trigger": "manual", "html":"true"});
$('.myclass').click(get_data_for_popover_and_display);
and the function for retrieving data is:
检索数据的函数是：
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');
}
});
}
What is happening is that the popover is NOT showing when I click, but if I hover the element later it will display the popover, but without the content (the data-contentattribute). If I put an alert()inside the successcallback it will display returned data.
发生的事情是当我点击时弹出框没有显示，但是如果我稍后将元素悬停，它将显示弹出框，但没有内容（data-content属性）。如果我alert()在success回调中放入一个，它将显示返回的数据。
Any idea why is happening this? Thanks!
知道为什么会发生这种情况吗？谢谢！
回答by a paid nerd
In your success callback, thisis no longer bound to the same value as in the rest of get_data_for_popover_and_display().
在您的成功回调中，this不再绑定到与get_data_for_popover_and_display().
Don't worry! The thiskeyword is hairy; misinterpreting its value is a common mistake in JavaScript.
别担心！该this关键字是毛; 误解它的值是 JavaScript 中的一个常见错误。
You can solve this by keeping a reference to thisby assigning it to a variable:
您可以通过将引用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');
}
});
}
Alternatively you could write var that = this;and use $(that)everywhere. More solutions and background here.
或者，您可以在任何地方编写var that = this;和使用$(that)。更多解决方案和背景在这里。
回答by Yannis
In addition to the answer above, don't forget that according to $.ajax() documentationyou can use the contextparameter to achieve the same result without the extra variable declaration as such:
除了上面的答案，不要忘记根据$.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');
}
});
}
