Twitter Bootstrap dismissible popover doesnot work on first click?

Question

My jQuery is behaving extremely weirdly. When click the button/anchor for the first time on page load it doesn't expand the popover div. But the jQuery is running and a console.log statement is executing. Only after click the button/anchor once, then clicking on something else on the page and then returning to click the button is the button performing expectedly. I am not able to make sense of this behavior. Please guide.

$('.BookAppButton').click(function(event){
    event.preventDefault();
    console.log("Button Clicked..");
    $('.BookAppButton').popover({
        title : '',
        html : 'true',
        content:'<div><p>I should have popped on first click</p></div>'
    });
});

Here is the JSFiddle link. If you run the code you'll understand the weird behavior I am talking about : http://jsfiddle.net/8yyjyte1/#&togetherjs=B36bVLS1R7

Thank you in advance.

Answer 1

The code you are calling inside your click handler is meant for preparing the popover, not for showing it. You should call it outside you .click function, the bootstrap js will show it automatically on focus of the target, your a in this case.

So this is what it should look like:

// -- this is not needed anymore
$('.BookAppButton').click(function (event) {
    event.preventDefault();
    console.log("Button Clicked..");

});

// this should be directly in your 'ready' function
$('.BookAppButton').popover({
    title: '',
    html: 'true',
    content: '<div><p>I should have popped on first click</p></div>'
});

and the fiddle: http://jsfiddle.net/cewkazk6/