JQuery .load problem

Question

Hi,

I have a webpage with search form fields and on click of submit button i do an Ajax call and fill a div with results using Ajax.BeginForm

The results have paging links to handle paging.

Problem is after the Ajax call I have this Jquery code that should fire when one of the paging links is clicked. But they do not fire.

Is this because the div is filled using Ajax call?

I tested that code using the click of the submit button and it fires ok. Just the paging links dont fire.

    $('.pagerlinks a').click(function() {
       $('#resultsdiv').load('Search/Advanced', {Keywords=keywords, etc }); 
});

Answer 1

I would use the live binding function in jquery to be able to bind to all specified elements at any time of creation:

http://docs.jquery.com/Events/live

Also does your code fire on DOM ready event? as in:

$(function () {
 $('.pagerlinks a').click(function() {
       $('#resultsdiv').load('Search/Advanced', {Keywords=keywords, etc }); 
});

});

Answer 2

Another way of doing it is by rebinding in a callback function, called as $.load's second parameter:

function initPagerlinks()
{
     $('.pagerlinks a').click(function() {
           $('#resultsdiv').load('Search/Advanced', {Keywords=keywords, etc }, initPagerlinks); 
     });
}

$(document).ready(function() {
    initPagerlinks();
});

Answer 3

There are two solutions: 1. Add to load function callback that setups events on loaded content. 2. Use live events:

$("p").live("click", function(){ $(this).after("Another paragraph!"); }); http://docs.jquery.com/Events/live