How can I detect when a new element has been added to the document in jquery?

Question

How can I detect when a new element has been added to the document in jquery ?

Explanation: I want to know when an element with class \"column-header\" has been adde

Answer 1

try this...

if($('.column-header')){  
//do something...
} 

or you can also do something like this..it will be more generic

jQuery.exists = function(selector) { return ($(selector).length > 0); }

if ($(selector).exists()) {
  // Do something
}

Answer 2

If you want to do some jQuery on it, you can also do something like livequery (extra plugin):

$('column-header').livequery(function()
{
    // do things here with your column-header, like binding new events and stuff.
    // this function is called when an object is added.
    // check the API for the deletion function and so on.
});

UPDATE: It seems that the link was broken. Try this link

Answer 3

I would use setInterval to repeatedly check for element. eg.

var curLength=0;
setInterval(function(){
  if ($('.column-header').length!=curLength){
    curLength=$('.column-header').length;
    // do stuff here
  }
},100);

this code will check for any new .colum-header elements every 100 ms

Answer 4

You should check out the jQuery Mutation Events. I believe that it is what you are looking for.