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.

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

Solution 2

If you want to decouple your code from the callback:

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

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

Solution 3

how about:

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

Solution 4

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

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

View more solutions

Comments

[Shpigford]

There's a lot of additional stuff I need to do. Not just show(). I need to access it outside of the success call.

[Alon Gubkin]

What do you actually want to do?

[Shpigford]

What do I actually want to do with the DOM element? All sorts of things. There's a slew of other functions I have that need to access the newly-inserted DOM elements.

[Alon Gubkin]

Why can't you call these functions from the success callback?

[Shpigford]

I guess I could...was just trying to not stuff a ton of stuff in to that success callback. Felt messy to do it that way.