Bootstrap 在 $(this) 元素上弹出

Question

我有一堆动态创建的元素，我能够显示调用此脚本的弹出窗口：

$('.gantt').popover({
    selector: '.bar',
    title: 'Test title',
    content: 'Test content',
    trigger: 'hover',
    placement: function() { return 'top' },
    container: 'body'
});

现在，我需要从一个函数中动态传递标题和内容，然后我这样做了：

[...]
onItemMouseover: function(elm, data) {
    elm.popover({
        selector: '.bar',
        title: data.title,
        content: data.content,
        trigger: 'hover',
        placement: function() { return 'top' },
        container: 'body'
    });
}
[...]

但是弹出窗口没有打开。是不是少了什么？

如果我调用 elm.remove() 元素被删除，那么 elm 会正确触发 DOM 元素。

Answer 1

这是一个补丁，可能有更好的官方方法，但我是这样解决的：

创建了一个 popoverContent 全局变量
已将 data.content 分配给 onItemMouseover 内的 popoverContent
调用脚本的第一个版本并从 popoverContent 变量中检索内容值

如果您有更好的解决方案，请分享。

更新

代码如下：

var popoverContent

$(document).ready(function () {
    createGantt(data);

    $('.gantt').popover({
        [...]
        content: function () {
            return popoverContent;
        },
        [...]
    });
}

function createGantt(data) {
    $('.gantt').gantt({
        [...]
        onItemMouseover: function(elm, data) {
            popoverContent = data.detailContent;
        },
    });
};

Bootstrap 在 $(this) 元素上弹出

Bootstrap popover over $(this) element

twitter-bootstrap

popover

bootstrap-popover

更新