Or the title can be put shortly as: Why doesn’t my jQuery events work after an AJAX callback?
Lets create a very simple example jQuery script which simply changes a list’s class on hover:
We’ll assign red as the hover color:
<style type="text/css">
.hover
{
color: #f00;
}
</style>Then add the jQuery hover() event to toggle/change the list’s class when the mouse hovers over the list. This is how the javascript code will look like inside the document.ready() function:
$("li").hover(
function()
{
$(this).toggleClass("hover");
},
function()
{
$(this).toggleClass("hover");
});
To simplify things, I’ve added a sample AJAX callback function which is triggered by a button:
<div id="container">
<ul><li>This list should trigger the hover event</li></ul>
The AJAX callback loads here...
</div>
<input type="button" id="btnLoad" value="Click me to change list">Our javascript would then look like this:
$(document).ready(function()
{
$("li").hover(
function()
{
$(this).toggleClass("hover");
},
function()
{
$(this).toggleClass("hover");
});
$("#btnLoad").click(function()
{
$.ajax(
{
url: "samplelist.html",
success: function(html)
{
$("#container").empty().append(html);
}
});
});
});The completed demo of the code above can be found here:
jQuery: Non-working Callback Events
When you click the button and load the AJAX callback, notice that the hover() event no longer triggers? This problem is also applicable to other jQuery events suck as click(), blur(), and others.
Lets take a look at what happens:
When we set the hover event for our lists, what is actually does is that it adds a javascript event and its matching function for each of the matched elements. So upon loading of the page, this is what happens to our list. It turns from:
<li>...</li>to:
<li onmouseenter="function()..." onmouseleave="...">...</li>But what we forgot is that is that when we loaded the AJAX callback, it still doesn’t have the event binded to the element:
<li>AJAX callback loaded me</li>So our hover event doesn’t trigger anymore because our AJAX callback doesn’t have one in the first place!
So how do we fix this? It quite simple. We just need to rebind the hover event to our AJAX callback. Running this function again:
$("li").hover(
function()
{
$(this).toggleClass("hover");
},
function()
{
$(this).toggleClass("hover");
});will make our hovers work again. But to make it even easier on our part, we can simply move all the initial bindings into a separate function and just call that on our document.ready() and AJAX success functions.
Remember, we don’t have to move all the bindings, just the ones that are affected by the AJAX callback. In this example’s case, we only need the binding for the hover event on our list.
By doing this, our javascript will now look like this:
$(document).ready(function()
{
initBinding();
$("#btnLoad").click(function()
{
$.ajax(
{
url: "samplelist.html",
success: function(html)
{
$("#container").empty().append(html);
initBinding();
}
});
});
});
function initBinding()
{
$("li").hover(
function()
{
$(this).toggleClass("hover");
},
function()
{
$(this).toggleClass("hover");
});
}Now we no longer have to worry why our Javascript events and validations don’t work on AJAX callbacks.
The working demo of this page can be found here:
jQuery: Re-binding jQuery Events on AJAX Callbacks
Or if you want to download all the source codes, you can follow the link below:
Download jQuery: Re-binding jQuery Events on AJAX Callbacks Source
26 Comments 
