按钮单击在引导程序弹出窗口内无法正常工作

Question

Here is my popover element:

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

My bootstrap popover content is a social media button. It shares something when you click on it. However, click event is not triggered properly. When I click share button which is available when popover is displayed, it fails one or two times out of 3 clicks.

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

After spending half day, I found solution. Since popover hide action triggered by focus event, sometimes popover is closed before click action is triggered. I added delay parameter to my popover options.

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

This parameter delays close action for a given amount of time. Thus, click action can be handled before the popover is closed.