Bootstrap popover.toggle() only show

Question

I am trying to integrate a twitter bootstrap popover ; I am forced to use the javascript API, because some dynamic elements are loaded via Ajax and should react too.

Basically, here is a example tag that should react :

<a data-container="#appConfigDialog" data-toggle="popover" data-placement="top" 
   data-content="&lt;img src=&quot;URL&quot; /&gt;"
   data-html="true" href="#" 
   class="popoverFileSee btn btn-default">See</a>

URL is by the way replaced by the correct URL

And my JS :

$( document ).on( "click", ".popoverFileSee", function() {
    $( this ).popover( "toggle" );      
    return false;
});

Here is the behavior I would like to achieve :

• When first click, the popover shows
• When a click occurs for an opened popover, it should close it

Isn't it the aim of "toggle" ? Is there something wrong in this code sample, or should I check elsewhere in my application ?

Thanks

EDIT : For now, it always show the popover, even if it is already opened Weird thing : if I add alert( "test" ); in my callback function, then it works..

Solution 1

Finally found the answer myself.. ;) I simply had to add an attribute to my link : data-trigger="manual"

Solution 2

Remove the toggle from popover function without using click event like,

$(".popoverFileSee").popover();

Demo

Updated, If you need to add click event the after this you can add which is independent to popover like,

$(".popoverFileSee").popover();
$(".popoverFileSee").on('click',function(){
   // your ajax code here
});

Comments

[Jérémy Dutheil]

As I said, I need to use the click event because I load some elements with Ajax ;)

[Jérémy Dutheil]

Yep, that's not the thing ; when I speak about "loading some elements with ajax", I mean "elements that have a popover button" One solution could be to call $( ".popoverFileSee" ).popover() each time a new element is loaded, but I prefer to simply add a click event that would automatically do it ; see my answer to solve the problem with this context ;)