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 what I'd like to be able to do...

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

$('#new_div').show();

#new_div would be some HTML element from the data I retrieved. I don't necessarily want to attach events to the new elements (like click ), so using something like .load() or .on() doesn't work here (as far as I know).

I tried setting the $.ajax() call to a variable: var new_div = $.ajax(...) but that didn't get me anywhere.

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

Answer 2

how about:

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

Answer 3

If you want to decouple your code from the callback:

functionWithALotOfStuffToDo = function(data){
  // do stuff here
}

$.ajax({
   url: url,
   success: functionWithALotOfStuffToDo
});

Answer 4

Assuming the data being returned is something like <div id='new_div' /> then try something such as

var newDiv = null;

$.ajax({
    url: url,
    success: function(data) {
        newDiv = $(data).appendTo($('body'));
    }
});

This will add the <div /> to the body of your page, and assign the jQuery element to the variable newDiv which can then be accessed again at a later stage.

However, if you access newDiv before success has been returned, it will be null or the previous value, if it was assigned previously.

Answer 5

Actually this sort of things can be solved by following way: (I know it is similar to others, but a little bit more clear)

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

Answer 6

I think it's ajax async cause the problem you mention.

In jQuery ajax funciton API says: Perform an asynchronous HTTP (Ajax) request.

If you want to access the data from ajax right after request

you should put you code in the ajax.success function like:

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

Or turn the async setting into false

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

that will make sure the $('#new_div') selector gets the object