Question

I have content that is being dynamically generated. How to I “listen” to a selector and trigger a function when it is available, then stop listening. Is there something like this in jQuery 1.7?

Answer 1

EDIT: Sorry, didn’t really read your question right! 🙂

You can do it, but it’s a bit of a pain. There’s no native support for it in jQuery, but browsers fire events that you can hook into. Check out the mutation events that are available and how to implement them, specifically the DOMNodeInserted event. There’s also some info here on how to handle the removal of an element (hooking into the DOMNodeRemoved event using jQuery). Hope this helps!

My original, incorrect answer:

You should be able to use the jQuery on() method to bind events to given elements. If the elements don’t exist when the page is rendered you can bind the event to a parent element that does exist, and let jQuery “bubble up” the event through the DOM to the handler you’ve attached.

Here is an example taken from the documentation. The event is bound to the tbody element, but it handles the click event on descendent tr elements, which may or may not exist when the event is bound.

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});