按钮单击在 bootstrap 弹出框内无法正常工作

Question

这是我的弹出框元素：

<a data-placement="bottom" data-toggle="popover" data-trigger="focus" tabindex="1"></a>

我的 bootstrap 弹出框内容是一个社交媒体按钮。当你点击它时，它会分享一些东西。但是，点击事件没有被正确触发。当我单击显示弹出窗口时可用的共享按钮时，3 次单击中有 1 次或 2 次失败。

var options =  {};
options.content = function() {
      return "<ul class='social social-list'>" +
               "<li><a id='fa-facebook' class='social-fb'><i class='fa fa-facebook fa-lg'></i></a></li>" +
             "</ul>"; 
      };

options.trigger = 'focus';     
options.html = true;

$('[data-toggle="popover"]').popover(options).on('shown.bs.popover', function(){

   var fbShareEvent = $("#fa-facebook").data("events");
   if(!fbShareEvent){
     $("#fa-facebook").on("click",function(event){
         fbShare();
     });
   }
}

Answer 1

花了半天时间，我找到了解决办法。由于 focus 事件触发的 popover 隐藏操作，有时 popover 在触发 click 操作之前关闭。我在弹出窗口选项中添加了延迟参数。

options.delay = {'hide': 500};

此参数将关闭动作延迟给定的时间量。因此，可以在弹出窗口关闭之前处理点击操作。

按钮单击在 bootstrap 弹出框内无法正常工作

button click does not work properly inside bootstrap popover

javascript

onclick

twitter-bootstrap

bootstrap-popover