javascript - 使用 Bootstrap 3 弹出窗口并加载外部 JSON

Question

我正在加载外部 JSON，并希望使用 Bootstrap popvers。

他们的示例代码如下:

HTML:

<button data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">jonathan</button>

大概:

$('[data-toggle="popover"]').popover();

但是，由于这是来自加载的 JSON，所以我必须执行以下操作:

$('body').on('click', '[data-toggle="popover"]', function(){
  // would I call somehtig like 
  $(this).popover();
});

我可以让它工作的唯一方法是:

$(window).load(function(){
  $('body').on('click','[data-toggle="popover"]', function(){
    //alert('here i am');
    $(this).popover();

  });
});

并且它仅在第二次单击时有效。我将如何实现这个？我宁愿只是悬停而不是点击

Answer 1

第二次点击时出现弹出窗口的原因是您初始化弹出窗口的方式。

$(window).load(function(){
  $('body').on('click','[data-toggle="popover"]', function(){
    //alert('here i am');
    $(this).popover();

  });
});

在这里，您在没有任何选项的情况下进行初始化，因此弹出窗口的默认触发器将是 click 事件，并且当您单击 body 时，您将执行此初始化。这就是您需要单击 2 次才能显示弹出窗口的原因。

为了避免这种情况，您需要在页面加载按钮上注册popover，并使用数据定义您感兴趣的触发器(点击或悬停) HTML 中的 -trigger 属性。

HTML

  <a id="example" tabindex="0" class="btn btn-lg btn-danger" 
       role="button" data-toggle="popover" 
       data-trigger="hover" title="Dismissible popover" 
       data-content="And here's some amazing content. It's very 
       engaging. Right?">
     Dismissible popover
  </a>

JS

$(document).ready(function(){
  $('#example').popover();
});

您还可以定义触发器和其他 options同时初始化弹出窗口，如下所示。

$('#example2').popover({
    trigger : 'hover'
  });

这是一个Pen展示实现情况。