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

sqougxex  于 2024-01-04  发布在  Bootstrap
关注(0)|答案(3)|浏览(206)

我在静态元素上使用了这个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”是一个函数,它在一个脚本上调用一个apache请求,从myssql中检索一些数据。
在另一个页面中,我想做同样的事情,但是在动态生成的元素上。我明白我必须从“body”调用弹出框,但是“.attr('data-content'”不再工作,我不明白为什么。
以下是非工作脚本:

$("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.."

    });


弹出框正在生成,但它仍然与文本“加载..",它不会改变。我错过了什么?与'身体'也许有些东西应该被称为不同?

4smxwvx5

4smxwvx51#

您正在尝试使用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();

});

字符串

xj3cbfub

xj3cbfub2#

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

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

字符串

zqdjd7g9

zqdjd7g93#

尝试这样的东西,它在我的场景中起作用:

$("body").popover({
    title: fetchTitle,
    content: 'loading...',
    container: 'body',
    html: true,
    placement: 'right',
    trigger: "hover",
    selector: '.popover_ajax'
}).on('show.bs.popover', async (e)=>{
   const popover = bootstrap.Popover.getInstance(e.target);
   let newContent = await fetchData();
   popover._config.content = newContent;
});

字符串
popover._config.content是关键。

相关问题