javascript - button click does not work properly inside bootstrap popover

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();
     });
   }
}

1 Answer

  1. Leo- Reply

    2019-11-13

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>