Bootstrap popover.toggle() only show

问题

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..

回答1:

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

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

来源：https://stackoverflow.com/questions/19974559/bootstrap-popover-toggle-only-show

标签

jquery

twitter-bootstrap

popover