Run a function when a DOM element is created

Question

Hi folks,

I want to bind an event to a certain class and ID for when matching objects are created in the DOM.

I am doing this as I have some jQuery code in an ASP UpdatePanel, which causes the DOM to be re-loaded on its partial postback. I have reset the events with live(), however I need to call a 2 line initialisation function as soon as the elements are created.

Is there any way to attach this to live(), or some other jQuery function, or will I have to write code to do this myself?

Thanks, Ed

Answer 1

If you're using an UpdatePanel you can either write a function called:

function pageLoad() { } //Called by ASP.Net javascript code

That will be called every time the page initially loads and when it loads UpdatePanel content, or alternatively you can hook up any function you want to run when an UpdatePanel comes back by doing this:

$(document).ready(function() {
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(myFunction);
});
function myFunction() {
 //Do stuff with elements
}

Note this will NOT run the first page load, only on UpdatePanel loads. Just add a call to myFunction(); in document.ready if you need it to run on load as well.

Answer 2

A DOMNodeInserted event is fired whenever a node is added to the DOM. Have the document body listen to this event, and whenever it's fired, search the inserted node for the class and ID selectors you're looking for.

$(document.body).bind("DOMNodeInserted", function(event) {
    // element is the newly inserted node
    var element = $(event.target);
    // if this element is of interest
    if($("<selector>", element).length > 0) {
        // run the initialization code here..
    }
}

Read more about DOM mutation events here.