Re-binding jQuery Events on AJAX Callbacks

Re-binding jQuery Events on AJAX Callbacks 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 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




You can leave a response, or trackback from your own site.

5 Responses to “Re-binding jQuery Events on AJAX Callbacks”

  1. nootropics says:

    This blog has inspired me to continue focusing on my own blog

  2. rift platinum says:

    I regard something genuinely interesting about your web site so I bookmarked .

  3. Website Design London says:

    Very interesting information!Perfect just what I was searching for!

  4. Alternative Health Trends says:

    Woman of Alien…

    Fantastic work you’ve done, this great site is actually amazing with fantastic details. Time is God’s way of maintaining all the things from taking place directly….

  5. warp_net_site says:

    Excellent website…

    the time to read or visit the content or sites we have linked to below the…

Leave a Reply

Designed for Ares Galaxy in Collaboration with Hostgator coupons and Popular Wordpress Themes and unlock iphone 5