Twitter Bootstrap popover not working on first click

Question

I am showing a popover when i click on an anchor. But the popover is not triggering on the first click, how ever it works on the second click.

HTML:

    <!-- Pop Check -->
<div class="popover-markup">
   <input class="checkbox-inline" type="checkbox" value="Option1">
   <a href="javascript:void(0)" class="trigger" data-placement="bottom" tooltip="Manage Users">Option1</a>
   <!-- Popup Content-->
   <div class="content hide">
      <div class="head hide">Select Users For Option1<span class="close_popover"><i class="fa fa-times"></i></span></div>
      <div>
         <label class="checkbox-inline">
         <input type="checkbox" id="" class="si_DSCM" value="user6"> User 6
         </label>
      </div>
   </div>
</div>

JS:

$(document).on('click', ".popover-markup>.trigger", function () { 

    $(this).popover({
        html: true,
        title: function () {
            return $(this).parent().find('.head').html();
        },
        content: function () {
            return $(this).parent().find('.content').html();
        }
    });    
});

This is my Fiddle: https://jsfiddle.net/47pef6g8/

I found similar questions but it didn't help me in my case.

Please help. Thanks in advance.

Answer 1

Looking at your code its very clear that you are initializing the popover on the click. Therefore it is taking two clicks to display the popover. My suggestion to you would be to initialize popover on load of the document.

Check the sample Fiddle based on your question.

$('[data-toggle="popover"]').popover({
    html: true,
    title: function () {
        return $(this).parent().find('.head').html();
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
}); 

Hope this helps.

-Help :)