Twitter bootstrap modal hidden event only fires once

Loading...

Twitter bootstrap modal hidden event only fires once

I'm using a page with a single modal defined on it ("#agenda-modal").
When a trigger (.agenda-item) is clicked, I'm showing this modal with remote content like so:
$("body").on("click", ".agenda-question", function(e){
  var url = ;
  $("#agenda-modal").modal({
    remote: url
  });
});

This works fine (I'm using listening to $body.on because .agenda-items are added via javascript).
When the modal is closed, I want to reload a part of the page (the part that the form inside the modal modifies).  So I'm using:
$("#agenda-modal").on("hidden", function(){
  alert("hidden");
});

Of course, all wrapped up in 
$(function() {...});

This works, but only once!  When I first load the page and click a trigger, the modal loads up & when I close the modal the alert happens.  If I click the same trigger again, the modal shows up again but this time when it closes the alert does not happen!
I don't know, but is this because the listener - on("hidden", function...) - is not "bound" anymore?  I thought .on will always catch the event?
The code for the modal is straight off twitter:


Any ideas?  I really want to catch when a modal closes so that I can update the part of the page that would have been changed.
Using rails btw, not sure if that matters...

Solutions/Answers:

Answer 1:

change

$("#agenda-modal").on("hidden", function() {
  alert("hidden");
});

to

$(document).on('hidden.bs.modal', '#agenda-modal', function () {    
  alert("hidden");
});

Answer 2:

This is a known issue with Bootstrap

The issue is the event needs to be re-added every time it is fired, but on a delay.

Here is an example:

function hiddenModal() {
    alert("hidden");
    setTimeout(function() {
        $("#agenda-modal").on("hidden", hiddenModal );
    }, 222);
}

$("#agenda-modal").on("hidden", hiddenModal );

This is similar to another question, but for a different kind of event:

Answer 3:

Couldn’t figure this out – everything looks OK, but there’s a fair amount of js being added by the rails pipeline so I couldn’t exclude the possibility something was interfering with my js.

Now using jquery’s native modals instead.

References

Loading...