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?

Answer 1

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