Bootstrap - 仅在第二次单击后才触发 Popover

Question

我 addClass/removeClass 一个 CSS class 动态调用了 SiteClass（背景见）。我像这样将 bootstrap 弹出窗口绑定到这些：

$(document).ready(function(){

  $("#SiteList").on('click','a.SiteClass', function(e){
    alert('clicked');
    e.preventDefault();
    e.stopPropagation();
    var strcontent = $(this).html();
    var strTitle = 'Title for ' + strcontent;
    var strMessage = 'Foo <b>Bar</b> Baz';

    $(this).popover({
       html: true,
       title: strTitle,
       content: strMessage 
    });
  });

});

第一次单击时出现警告框 'clicked'，但没有弹出框。后续点击和弹出窗口工作。

关于为什么会发生这种情况以及如何让弹出窗口从点击 1 时触发的任何线索？

Answer 1

$().popover(options) 只是初始化您的弹出窗口。您可以通过以下方式触发弹出窗口的显示：

$(this).popover('show');

如果您想改为在点击时切换弹出窗口，请尝试：

$(this).popover('toggle');

我认为它仅在第一次点击后起作用的原因是，第一次点击时弹出窗口是用 the default trigger 'click' 初始化的，以便后续点击（但不是第一次点击）将触发它。

Answer 2

经过多次尝试，我终于找到了这个解决方案并且工作正常：

<script>
    $(document).ready(function () {
        $(document).on("click", '#add-new', function (e) {
            e.preventDefault();
    
            $('#add-new').popover({
                placement: 'right',
                html: true,
                container: 'body',
                trigger: 'manual',
                content: function () {
                    return $('#popover_content_wrapper').html();
                },
            });
            $(this).popover('toggle');
        });
    });
</script>

Bootstrap - 仅在第二次单击后才触发 Popover

Boostrap - Popover only being fired after second click

javascript

jquery

twitter-bootstrap

bootstrap-popover