Bootstrap popover:在动态创建的元素上更改popover的内容

Question

我在静态元素上使用了这个popover脚本，它运行得很好：

$(".popover-class").popover({
title: fetchTitle,
content: 'loading...', 
html: true,
placement: 'right'
}).on('shown.bs.popover', function () {
var popover = $(this).attr('data-content', fetchData).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
});

其中"；fetchData"；是一个函数，它对从mysql中检索一些数据的脚本调用ajax请求。

在另一个页面中，我想做同样的事情，但在动态生成的元素上。我理解我必须从"；"主体"；，但是随后"；。attr("数据内容"(不再有效，我不明白为什么。

这是非工作脚本：

$("body").popover({
title: fetchTitle,
content: 'loading...',
container: 'body',
html: true,
placement: 'right',
trigger: "hover",
selector: '.popover_ajax'
}).on('shown.bs.popover', function () {
console.log('test'); // <- this is working 
var popover = $(this).attr('data-content', 'new text').data('bs.popover');
popover.setContent();
popover.update();
// <-- all this is not working, the popover remain with text "loading.."
});

popover正在生成，但它停留在文本"中；正在加载&"；，它不会改变。我是不是错过了什么？关于"身体"，也许有些东西应该用不同的名字来称呼？

Answer 1

您正试图使用this从body元素中获取属性。

$("body").popover({
title: fetchTitle,
content: 'loading...',
container: 'body',
html: true,
placement: 'right',
trigger: "hover",
selector: '.popover_ajax'
}).on('shown.bs.popover', function () {
var popover = $(event.target).attr('data-content', 'new text').data('bs.popover');
popover.setContent();
popover.update();
});

Answer 2

$('.popover_ajax')将匹配页面上的所有元素，您只想匹配单击的元素。事件处理程序将接收作为参数的事件，您可以从中找到事件目标：

.on('shown.bs.popover', function (event) { 
var popover = $(event.target).attr('data-content', 'new text')...