Bootstrap Popover works after one click - JavaScript

Question

I have Bootstrap-Buttons buttons that should show a popover when a button is clicked.

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

When the website is loaded and I click the button for the first time, nothing happens. If I click a second time, a popup will open and it will work fine.

What can I do for a popover for the first click?

Answer 1

In your code, the first time you click the button, popover is only triggered for init, so until the second click you see the effect,

I'm not sure if you used the popover version. As the resource I found, they also use jquery.

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

First, you can start popover first, and then click on the button with any button you want. First approach, bind the popover directly to the button

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

Second appoach, associate the popover with the contents of the div and show the popup using the button

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

Answer 2

How about this?

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

Answer 3

try it

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

Answer 4

try jquery style,

Suppose the button is id usernameL

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