Search code examples
jqueryajaxdrupal-6

How to jQuery-ify elements returned by ajax call?


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

Solution

  • 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.