javascript - Twitter Bootstrap popover not working on first click -

i showing popover when click on anchor. popover not triggering on first click, how ever works on 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 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 fiddle: https://jsfiddle.net/47pef6g8/

i found similar questions didn't me in case.

please help. in advance.

looking @ code clear initializing popover on click. therefore taking 2 clicks display popover. suggestion initialize popover on load of document.

check sample fiddle based on question.

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

hope helps.

-help :)