jquery not workin after callback

Question

I've got a function to parse some data, and get a result which is the same as the previous, with just some classes thrown here and there.

$(document).ready(function() {
  $("div.rating div").click(function(){
     var str = $(this).attr('alt');
     var b = str.split("-");
     var book = b[0];

     $("div.book-" + book).load("sites/all/modules/rm_raamaturiiul_rating/rating.php", { query: str });
  });
});

But after i load the result, jquery doesn't check it. For example, i click a div, it sends a request, then returns and rewrites the div, with the same ID and Class names, but after that, jquery ignores any clicks on it. I've even put alert() before the .load, but jquery simply skips it after it has done a job on it the first time. I've tried post, but jq simply doesn't even initiate the function on the div.

Answer 1

This is because your reloaded content doesn't have event handlers attached. Attach them using live() method and it will work after reloading your data, or hook them up manually after loading the data (first method is simplier).

Answer 2

Calling $(...).click(function) will handle the click event for the specific elements that the jQuery object currently contains.
When you call .load, the element is replaced by a new element, which doesn't have any event handlers.

You need to call .live, which will handle the event for all elements that match the selector, no matter when they are created.

For example:

$("div.rating div").live("click", function() { ... });