jQuery selector for dynamically generated element

Question

I have the following html snippet:

<div id="contentX"><h1>MyHeading1</h1></div>

I could select with jQuery snippet syccessfully with the following:

console.log($('#contentX h1'));

The output is

[<h1>MyHeading1</h1>]

However, it did not work when I dynamically loaded the contents. For example,

html code snippet:

<div id="content"></div>

jQuery code snippet:

$('#content').load('foo.html')); // the content is loaded correctly with <h1> tag

jQuery code snippet does not work:

console.log($('#content h1')); // it returns []. I was expecting to return something.

I am wondering if this is a similar behavior like event binding: .click() vs .live().

Thanks in advance for your help.

And what did foo.html contain?

Dogbert
– Dogbert

2011-06-22 15:41:24 +00:00
Commented Jun 22, 2011 at 15:41 — Dogbert
– Dogbert, Commented Jun 22, 2011 at 15:41

Michael Schmidt · Accepted Answer · 2013-05-17 14:37:36Z

8

The load function is asynchronous, meaning it starts the load and then it carries on in the background and then continues to execute the rest of your script.

It does not wait for the load to complete first.

You can attach a function to the load call to tell jQuery to do it once the load is complete.
Here is an example:

$('#content').load('foo.html', function() {     
    console.log($('#content h1'));
});

edited May 17, 2013 at 14:37

Michael Schmidt

9,26013 gold badges59 silver badges80 bronze badges

answered Jun 22, 2011 at 15:42

Jon Grant

11.5k2 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Levi Morrison · Accepted Answer · 2011-06-22 17:16:41Z

2

$('#content').load('foo.html', function () {
    console.log($('#content h1'));
});

edited Jun 22, 2011 at 17:16

Levi Morrison

19.6k8 gold badges68 silver badges87 bronze badges

answered Jun 22, 2011 at 15:48

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

Comments

sjngm · Accepted Answer · 2012-01-11 21:44:27Z

1

Load is one of jQuery's shorthand AJAX methods, and same as animation functions and others, it doesn't wait until it finishes loading the external file (foo.html) in order to run. Try putting the console.log (or whatever you want there) as a callback:

(...).load([url], function() {
  console.log("whatever");
}

You can also use the callback to catch errors when trying to fetch the page:

(...).load([url], function(response, status, xhr) {
  if (status == "error") {
    alert("Well, that didn't really work, here's the reason why:" + xhr.statusText);
  }
}

Refer to the .load page on jQuery's API to dig further: http://api.jquery.com/load/

Hope this works for you

edited Jan 11, 2012 at 21:44

sjngm

13k16 gold badges90 silver badges118 bronze badges

answered Jun 22, 2011 at 15:59

Ram Bulatnikov

214 bronze badges

Collectives™ on Stack Overflow

jQuery selector for dynamically generated element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related