Question

当一个公共类的任何元素被点击在主体上时，我一直在尝试显示一个弹出窗口。问题是，弹出窗口最初不会出现在第一次单击时，但它会在下一次单击事件中显示并正常运行。这是我的代码：

HTML：

<button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="top" data-content="Hello World! This is a test!"> Popover on top </button>

JavaScript的：

$('body').on('click', '.pop', function(e){
    $(this).popover();//.popover('show');
});

它也可以在JSFiddle中找到。

我无法弄清楚这里有什么问题？有什么建议吗？

Answer 1

功能代码为：

$( '.pop' ).popover();

Forked your fiddle here

在元素上初始化popover会自动处理点击事件。您的代码等待第一次单击以初始化弹出行为，这意味着第二次单击是弹出窗口可以自行处理的第一次。

Answer 2

您需要在页面加载时初始化插件，而不是单击。

将您的代码更改为：

$('.pop').popover();

DEMO

如果这是加载后添加到页面的元素，则需要在创建元素后初始化插件。

Answer 3

正确的方法是通过弹出窗口选项，正如您在bootstrap documentation

上看到的那样

可能是这样的：

$('.pop').popover( { container: 'body', placement: 'top', trigger: 'click' } );

如您所见，您可以在此处指定多个选项，例如在哪里附加，展示位置或触发器。

请注意，您必须将其包含在文档就绪块中。

Here is a jsfiddle.

Answer 4

你必须在显示之前调用destroy。以下代码将对你有用

$(document).on("click", ".pop", function(){

    $(this).popover("destroy");

    $(this).popover({
        placement: 'top',
        html: true,
        title: "Popover Title",
        content: "<strong>Popover Content</strong>"
    });

    $(this).popover("show");
});

Bootstrap3：当由类的click事件启动时，popover最初不会出现

4 个答案: