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上的按钮上注册page load，并使用HTML中的data-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。

使用Bootstrap 3 popover并加载外部JSON

1 个答案: