javascript - Bootstrap - 仅在第二次单击后才触发弹出窗口

Question

我动态addClass/removeClass一个名为SiteClass的CSS类(参见this question了解背景)。我将 Bootstrap 弹出窗口绑定(bind)到这些，如下所示:

$(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)只需初始化您的弹出窗口。您可以通过以下方式触发弹出窗口的显示:

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

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

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

我认为它仅在您的情况下第一次单击之后才起作用的原因是，第一次单击时，弹出窗口会使用 the default trigger 进行初始化。 'click'，以便后续点击(但不是第一次点击)将触发它。