Bootstrap Popover works after one click - JavaScript

Question

I have some Bootstrap-Buttons, which should show a popover when the button is clicked.

usernameL.onclick = function(e){
   $("#" + e.currentTarget.id).popover({html : true});
}

When the website has loaded and I click the button a first time, nothing happens. If I click a second time, the popover opens and it works normal.

What can I do for the popover to appear on the first click?

Answer 1

In your code, first time you click on button the popover start to init only, so until the second click, you see the effect,

I'm not sure about the version popover which you used. As the resource which I have found, they are using the jquery also.

https://github.com/klaas4/jQuery.popover/blob/master/demo.html

You can init the popover first, and then trigger click for it from any button which you want First approach, bind popover directly into button

$(function(){
    $("[name=usernameL]").popover({trigger: 'click'});
});

Second appoach, bind popover from a content div, and show popup from a button click

$("#divcontent").popover({trigger: 'click'});
$("[name=usernameL]").click(function(){$("#divcontent").trigger('click')});

Answer 2

What about this?

usernameL.onclick = function(e){
   $("#" + e.currentTarget.id).popover({html : true}).popover('show');
}

Answer 3

try this

usernameL.onclick = function(e){
   $("#" + e.currentTarget.id).popover({html : true});//Initializes popover
   $("#" + e.currentTarget.id).popover('show');//show popover
}

Answer 4

try the jquery style,

i suppose the button is id usernameL

$('#usernameL').click(function(){
$(this).popover();
});