Twitter bootstrap instant hidden event fires only once

Question

I am using a page with one modal defined on it ("# Agenda-modal"). When the trigger (.agenda-item) is clicked, I show this modal with deleted content as follows:

$("body").on("click", ".agenda-question", function(e){ var url = <build my url here>; $("#agenda-modal").modal({ remote: url }); }); 

This works fine (I use listening to $ body.on because .agenda elements are added via javascript).

When the modal function is closed, I want to reload part of the page (the part that changes shape inside the modal modification). Therefore, I use:

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

Of course, all wrapped in

 $(function() {...}); 

It works, but only once! When I first load the page and press the trigger, the modal load increases, and when I close the modal signal, this happens. If I click on the same trigger again, the modal will appear again, but this time, when it closes the warning, it does not happen!

I don’t know, but is it because the listener - on ("hidden", function ...) - is no longer "bound"? I thought it would always catch an event?

Modality code directly from the site:

 <div class="modal hide fade" id="agenda-modal"> <div class="modal-body"></div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">Close</button> </div> </div> 

Any ideas? I really want to catch when the modal closes so that I can refresh the part of the page that would be resized.

Using btw rails, not sure if this is important ...

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 problem is the need to re-add the event every time it starts, but with a delay.

Here is an example:

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

---

This seems like a different question, but for a different type of event:

• Changing the radio buttons () icons only once when using the $ () button. ('reset')

Answer 3

It is impossible to understand this - everything looks fine, but there are quite a lot of js added by the rails pipeline, so I could not exclude the possibility that something was interfering with my js.

Now instead of using the built-in jquery mods.