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

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.