jQuery selecting elements that don't yet exist

Question

In jQuery I want to be able to select an element that does not even exist yet, how can I accomplish this?

I would like to select an element by their id when they are created.

Thanks.

score 7 · Accepted Answer · edited Jan 12 '14 at 07:16

7

You can bind events to elements that don't yet exist using .on(); but other than that, I don't think you've got much of a solution.

What are you trying to do exactly?

$(document).on("click", "#futureID", function(){
  /* whenever <a id='futureID'>Hello</a> is created,
     it will have this functionality */
});

/* Sometime in the future, you add the link */
$("body").append("<a href='index.php' id='futureID'>Hello</a>");

That link would have the aforementioned functionality already connected.

edited Jan 12 '14 at 07:16

circuitry

1,169
16
16

answered Jul 13 '09 at 21:25

Sampson

265,109
74
539
565

You can use Event Delegation depending upon your HTML structure. – SolutionYogi Jul 13 '09 at 21:27
1

`live()` is deprecated now. Use `on()`. See this answer: http://stackoverflow.com/a/8191450/1738090 – w3bshark May 15 '13 at 13:29

score 1 · Answer 2 · answered Jul 13 '09 at 21:24

1

As of version 1.3, you can use jQuery's "Live" functionality.

answered Jul 13 '09 at 21:24

Nosredna

83,000
15
95
122

score 1 · Answer 3 · answered Jul 13 '09 at 21:25

If you're adding them in code, you can use the .live() method (read the docs).

If they are being added to the DOM by a web service call, for example, then you can use event delegation. I'll leave it to you to read up on that! If you are adding piles of elements to the DOM, then event delegation is the way to go.

jQuery selecting elements that don't yet exist

3 Answers3