5ervant 5ervant - 2 months ago 11
jQuery Question

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

I want to

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



$(function () {
$('[data-toggle="popover"]').popover()
})

$('[data-toggle="popover"]').on('hidden.bs.popover', function () {
$(this).popover('destroy');
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?

Answer

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 () {
  $(this).popover('destroy');
  console.debug("'hidden.bs.popover' triggering twice!");
});
Comments