Twitter bootstrap modal hidden event only fires once

Question

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 = <build my url here>; $("#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…

Accepted Answer

change

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

to

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

Twitter bootstrap modal hidden event only fires once

Solution

Problem