Accessing DOM object after AJAX call?

Question

I have a typical AJAX call that appends some HTML to the current page. I want to be able to access the newly inserted HTML with typical jQuery selectors.

Here\'s wha

Answer 1

If you would like to manipulate the new content immediately after (or even before) inserting it to the DOM, you can put that in the AJAX success callback too:

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      $('#new_div').show();
   }
});

On the other hand, if you want to bind handlers to content that will be added to the page via ajax, jQuery does that like this:

$(document).on('click', '#new_div', function(){
  alert("This function is bound to all #new_div's click events, even if they are added to the DOM via ajax later!")
});