How to close popovers on modal close?

Profile picture for Elfayer
Elfayer

I want to close all popovers that are in a modal, so that they are not displayed if I reopen the modal.

The problem is that if I try to close at $("#modal").on("hidden", function() { [...] });, the targets are already unavailable. The same goes if I do it at .on("shown", ....

I cannot delete using :

$(".buttonPopover").popover("hide");

Because .buttonPopover is never available at the time I want to delete the popovers. How can I close them all without accessing their parent ?

Bootply

The problem is that if I try to close at .on("hidden"), the targets are already unavailable

That's because the hidden.bs.modal event fires:

"when the modal has finished being hidden from the user (will wait for CSS transitions to complete)."

Instead, use the hide.bs.modal event which:

" is fired immediately when the hide instance method has been called"

Like this:

<!-- language: lang-js --> 
$('.modal').on('hide.bs.modal', function() {
  $("#openPopover").popover("hide")
});

Demo in Bootply

Update

I'm curious if you're hidden event was even firing in the first place. The event name is namespaced so you have to refer to it as hidden.bs.modal

This will never get called:

$('.modal').on('hidden', function() {
  alert('hi');
});

This should work:

$('.modal').on('hidden.bs.modal', function() {
  $("#openPopover").popover("hide")
});