CODEWITHSUNDEEP
jquery
Malcolm
Malcolm

Reputation: 12864

JQuery .load event not fired on anchor link click event

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.

The 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 don't fire.

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

Upvotes: 0

Views: 2166

Answers (3)

Thinker
Thinker

Reputation: 14464

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

Upvotes: 0

karim79
karim79

Reputation: 342635

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();
});

Upvotes: 2

Richard
Richard

Reputation: 22016

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 }); 
});

});

Upvotes: 3

Related Questions