5ervant 5ervant - 1 month ago 5
jQuery Question

'destroy' if the Bootstrap .popover() be on('hidden.bs.popover', is triggering another 'hidden.bs.popover' event

I want to

if it become
after it be
so it will not
again. Everything seems right but look at the console, the event
is triggering twice because destroying a popover will trigger another
caused to destroy the destroyed popover and looks like it will affect a little of performance.

$(function () {

$('[data-toggle="popover"]').on('hidden.bs.popover', function () {
console.debug("'hidden.bs.popover' triggering twice!");

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

I'd tried to figure it out but I choose not to include that for avoiding confusion. What is the right way to destroy the popover that have dismissed without triggering the same event?


You can use one to only bind once the event, but I believe it will work only for the first popover and then it will unbind the event from all other popovers, but it's worth giving it a chance:

$('[data-toggle="popover"]').one('hidden.bs.popover', function () {
  console.debug("'hidden.bs.popover' triggering twice!");