ajax success function (with html method) only fires once - php

Question

I'm having some problems with ajax callbacks that I'm hoping I could get some help with. Basically, this script replaces the #inbox div with archive.php (which normally would generate messages and matching modals, but for simplicity sake I just included generic modals).
The ajax callback is triggered when you close a modal. It currently returns the modals ID. However, this only works once - that's where I'm having the problem. The problem seems to lie with the jQuery html command. I've replaced it with alert(id) and the script will run as many times as I want. Any suggestions? Please let me know if I need to clarify more. Thanks.
HTML / JavaScript:
<div id="inbox"> <!-- Content should be put between this div -->
<?php include_once('archive.php'); ?>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#inbox .modal').on('hidden', function() {
id = $(this).attr('id');
$.ajax({
type: "POST",
url: "archive.php",
data: {message_id : id},
cache: false,
success: function(data) {
$('#inbox').html(data); // problem is here
}
});
});
});
</script>
PHP (archive.php):
<?php echo $_POST['message_id']; // I've also used SQL inserts, which work fine when I'm not using the jQuery HTML command ?>
<!-- Modal 1 -->
Launch demo modal
<div id="modalOne" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- Modal 2 -->
Launch demo modal
<div id="modalTwo" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- Modal 3 (etc...) -->

Answer 1

When you run this:
$('#inbox .modal').on('hidden', function() {
It finds the current '#inbox .modal' objects and binds an event handler to them.
When you then do:
$('#inbox').html(data);
it replaces those DOM objects with new ones and you no longer have any event handlers active on those new objects.
You have two choices to fix it:
You can use delegated event handling which works with dynamically created objects.
You can rebind the event handlers after replacing the HTML.
I don't know about the hidden event you are using, but if it works with delegated event handling, then you can change to this to use delegated event handling:
$('#inbox').on('hidden', '.modal', function() {
Here, the event is bound to the #inbox object which is not recreated and it then checks events that bubble up to see if they originated on a .modal object. That's how delegated event handling works and it works with child objects that are dynamically created after the event handler is installed on the parent object.

Answer 2

You have bound the event to $('#inbox .modal'), so when you replace the content with $('#inbox').html(data) you are also removing (replacing) the element that the event is bound to. Instead try $('#inbox').on('hidden', '.modal', function() { for binding your event.