I ask this question in a Drupal context, but the answer may be generic and not specifically depend on Drupal.
I have some HTML elements that get updated/replaced via jQuery/ajax. On the first page load, the elements are properly processed by jQuery. However, the links included in the data returned after an ajax call are ignored by jQuery.
// This standard function ensures that elements are properly processed after first page load:
Drupal.behaviors.events = function(context) {
// This works as intended. Clicking on links works as intended:
$('.event_browse_location .parent_locations a:not(.events-processed)', context).addClass('events-processed')
.bind('click', function() {
$.get(Drupal.settings.basePath + '/events/location/' + parseInt(this.id, 10), null, browseLocation);
return false;
});
}
var browseLocation = function(response) {
var result = Drupal.parseJson(response);
// New elements are properly added to the DOM here:
$('.event_browse_location').html(result.data);
// However, this does not seem to have any effect.
// The a elements in the new elements do not work as intended.
// jQuery does not process them at all.
$('.event_browse_location .parent_locations a:not(.events-processed)').addClass('events-processed')
.bind('click', function() {
$.get(Drupal.settings.basePath + '/events/location/' + parseInt(this.id, 10), null, browseLocation);
return false;
});
}
In this case, there were two silly mistakes.
The first one was pointed out by guest271314: there was an undeclared variable in the original code I posted. I have amended the question accordingly.
Secondly, my jQuery selector was wrong and was excluding elements that were meant to be included. Fixing the selector fixed the problem.