jquery functions dont work on dom elements loaded asynchromously

Question

I wrote jQuery event handlers on DOM elements that are not yet in the page but might be loaded asynchronously into the page. What I observed was these event handlers seem to not recognize that some new elements were added to the DOM and that they need to act on them on triggering.

Am I right in my observation? How do I achieve this functionality?

See [this answer](http://stackoverflow.com/questions/9346346/jquery-selector-doesnt-update-after-dynamically-adding-new-elements/9346385#9346385) to another question for a good description of your jQuery options for solving this problem with `.on()` or `.delegate()`. — jfriend00, Feb 19 '12 at 20:23

score 2 · Accepted Answer · answered Feb 19 '12 at 20:20

2

If you want event handlers to work on dynamically added content, you need to use on

$(document).on("click", "someCssSelector", function(){
    //your code here
});

Of course this will cause all clicks anywhere on your page to be watched. To be more efficient, see if you can structure your page so that all of these elements whose click event you want to handle will be in one container. ie, if all of these elements are going to be added to a div with an id of foo, you'd write the above more efficiently as

$("#foo").on("click", "someCssSelector", function(){
    //your code here
});

If you're using jQuery < 1.7, you'd use delegate

$(document).delegate("someCssSelector", "click", function(){
    //your code here
});

answered Feb 19 '12 at 20:20

Adam Rackis

82,527
56
270
393

1

@SLaks - I'm getting to that :) – Adam Rackis Feb 19 '12 at 20:21
@SLaks what does root mean here? – Kamal Reddy Feb 19 '12 at 20:35
@AdamRackis Is there a way of mentioning to js that it should always check for all the loaded DOM elements globally instead of using 'on' in each event function? – Kamal Reddy Feb 21 '12 at 14:35

score 1 · Answer 2 · answered Feb 19 '12 at 20:21

Am I right in my observation?

Yes.

How do I achieve this functionality?

Using the .on function to subscribe to those event handlers if you are using jQuery 1.7+:

$(document).on('click', '.someSelector', function() {
    ...
});

or using the .delegate function if you are using an older version (higher than 1.4.3):

$(document).delegate('.someSelector', 'click', function() {
    ...
});

For both you could use a more specific root than document to improve performance if you know that those elements will be added to some container for example.

And if you are using some prehistoric version you could go with .live():

$('.someSelector').live('click', function() {
    ...
});

jquery functions dont work on dom elements loaded asynchromously

2 Answers2

Linked