Question

我addClass / removeClass动态称为SiteClass的CSS类（有关背景，请参阅this question）。我将bootstrap popover绑定到这些：

$(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 
    });
  });

});

我第一次点击时，我点击了警告框，但没有弹出窗口。随后的点击和弹出窗口工作。

有关为什么会发生这种情况的任何线索以及点击1点击弹出窗口？

Answer 1

$().popover(options)只是初始化你的popover。您可以使用以下命令触发弹出窗口的显示：

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

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

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

我认为在第一次点击之后仅用的原因是，首次点击时，使用the default trigger 'click'初始化了popover，以便后续点击（但不是第一次点击）会触发它。

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>

Boostrap - Popover仅在第二次点击后被解雇

2 个答案: