Bootstrap Popover works after one click - JavaScript

问题

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?

回答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')});

回答2:

What about this?

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

回答3:

try this

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

回答4:

try the jquery style,

i suppose the button is id usernameL

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

来源：https://stackoverflow.com/questions/17963329/bootstrap-popover-works-after-one-click-javascript