Click event does not work after ajax paging

Question

I really hope someone can help with this problem. I have an ajax pagination script that works great on the first page but the click events will not work on any other pages from the paging.

This is how I have it setup:

jQuery script

<script type="text/javascript">
// prepare when the DOM is ready 
$().ready(function() {
//popup div
$(".wsbutton_pop").click(function(e){ 
//getting height and width of the message box

   var height = $('#popuup_div').height();
   var width = $('#popuup_div').width();
   //calculating offset for displaying popup message
   leftVal=e.pageX-(width/2)+"px";
   topVal=e.pageY-(height/2)+"px";
   //show the popup message and hide with fading effect
   $('#popuup_div').css({left:leftVal,top:topVal}).show();
   $('#popuup_div').html("<img src='images/ajaximg.gif' border='0'>");

       $.ajax({ 
          type: "get", 
          url: $(this).attr("href"), 
          success: function(r){ 
     $('#popuup_div').html("")   
           $('#popuup_div').prepend(r);
    }
     });

  });

//close div on mouse click

$(".popup_msg").click(function(e){ 
   $('#popuup_div').fadeOut();
  }); 

}); 
</script>

That should popup a div with content from another page.

Now my link: <a href="http://mysite.com/file.php?content=1" class="wsbutton_pop">Load content</a>

That works great on the initial page but the problem now is when I click to visit page 2 which has the exact same link, the link doesn't work anymore.

As a note, my pages should load in a div with id="paging". The ajax paging itself works great, its just that any jquery click event on the resulting pages does not work. I think the problem may be that I need to rebind the script but I do not know how to accomplish that.

Thanks for any help on this.

Answer 1

By your description, it sounds like you are generating a new page with a .wsbutton_pop in it. If that's the case, you'll need to attach your onclick function to it. Your initial script is only run at first load, so the registration is only for the .wsbutton_pop's that exist at that time.

Answer 2

I would guess you are overwriting the link with the pagination so the click event is no longer bound. If you are using jquery 1.3 you can use the live events to fix this.

$(".wsbutton_pop").live("click", function(e) { ...

Or if you're using an earlier version of jQuery you can just reattach the event handler when you get the new page data back.

Answer 3

You are correct about rebinding the script. The reason is that the elements on the page are getting recreated during the ajax postback.

If you are using jQuery 1.3 or higher you can use live events (for click) like this:

$(".wsbutton_pop").live("click", function(e){ 
    ...
});

Note that live events do not work with the following events: change, blur, focus, mouseenter, mouseleave, and submit.

If you are not using jQuery 1.3, or you need to use one of the events above, you should follow the advice in the following article to avoid memory leaks: Code-Project Article

Answer 4

You are binding only the initial .wsbutton_pop elements. If those get removed, and new elements of class .wsbutton_pop get added they will not automatically recieve the click event handler you wired up the one time.

What you're looking for is

$(".wsbutton_pop").live("click", function(e) {...});

That will apply to all instances of .wsbutton_pop currently on page, and any that get created.

-=-=-=-=-=-=-=-=-=-

The other answers came in as I wrote this, I'd say if we get a mashup of Brian Fisher's post and Jimmie R. Houts's we'd have the best answer, and probably mentioning that only the elements that are currently in DOM receive the event handler when using $(..).click(...)