When you've added a click (or other event) handler to all links using $('a').click(fn), you'll find that the events no longer work after you've loaded new content into a page using an AJAX request. When you call $('a'), it returns all the links on the page at the time it was called, and .click(fn) adds your handler to only those elements. When new links are added, they are not affected. Events are bound only to elements that exist at the time when you issue your initial jQuery call. When you create a new element, you must bind the event to it separately, or use event delegation.
The way of handling this issue:
.live( eventType,handler )
Description: Attach a handler to the event for all elements which match the current selector, now and in the future.
·live( eventType, handler ) version added: 1.3
eventType A string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.
handlerA function to execute at the time the event is triggered.
·live( eventType, eventData, handler ) version added: 1.4
eventType A string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.
eventData A map of data that will be passed to the event handler.
Handler A function to execute at the time the event is triggered.
·live( events ) version added: 1.4.3
Events A map of one or more JavaScript event types and functions to execute for them.
For more information: http://api.jquery.com/live/
You just need to do little of your jQuery code, here is the sample:
Old:
$(function() {
$('#hide_expand').click(function(){
$('tr.task_assign_father').siblings('#scenario_tr').toggle();
});
});
New:
$(function() {
$('#hide_expand').live('click',function(){
$('tr.task_assign_father').siblings('#scenario_tr').toggle();
});
});
