I want to attach a function to a jQuery element that fires whenever the element is added to the page.

I've tried the following, but it didn't work:

var el = jQuery('<h1>HI HI HI</H1>');   
el.one('load', function(e) {
  window.alert('loaded');
});    
jQuery('body').append(el);

What I really want to do is to guarantee that another jQuery function that is expecting some #id to be at the page don't fail, so I want to call that function whenever my element is loaded in the page.

To clarify, I am passing the el element to another library (in this case it's a movie player but it could be anything else) and I want to know when the el element is being added to the page, whether its my movie player code that it is adding the element or anything else.

I want to attach a function to a jQuery element that fires whenever the element is added to the page.

I've tried the following, but it didn't work:

var el = jQuery('<h1>HI HI HI</H1>');   
el.one('load', function(e) {
  window.alert('loaded');
});    
jQuery('body').append(el);

What I really want to do is to guarantee that another jQuery function that is expecting some #id to be at the page don't fail, so I want to call that function whenever my element is loaded in the page.

To clarify, I am passing the el element to another library (in this case it's a movie player but it could be anything else) and I want to know when the el element is being added to the page, whether its my movie player code that it is adding the element or anything else.

• javascript
• jquery
• jquery-events

• 1 Why not call your other jQuery function right after you've appended the element? – joshley Commented Nov 17, 2009 at 11:10
• Because it's not me who is appending the element. – Miguel Ping Commented Nov 17, 2009 at 12:04

7 Answers 7

I want to attach a function to a jQuery element that fires whenever the element is added to the page.

You want the livequery plugin, which does just this. The recent live function is similar, except it won't call you when the element is added. We use it all the time-- works great.

You'll use $('h1').livequery(function() {alert('just added');});

I do not know that there is this type of event, what es to mind is creating the event "el-load" based on this tutorial, and then extend "append" to know if the item has this event make the call to it.

Use LiveQuery (jQuery plugin), and attach a load event to ur dom element (h1), in this case.

try overwriting the append method so you can add your own event?

jQuery.extend(jQuery.fn, {
    _append: jQuery.fn.append,

    append: function(j) {
        this._append(j);
        j.trigger('append');
    }
});

var el = jQuery('<h1>HI HI HI</H1>');   
el.one('append', function(e) {
    window.alert('loaded');
});    
jQuery('body').append(el);

If the tag is being created via ajax, you can use a related node to subscribe to the ajaxSuccess event.

http://docs.jquery./Ajax/ajaxSuccess

$('#somenode').ajaxSuccess(function(){
     if ($('h1').length > 0) { ... }
});

If it's just being added to the DOM by a local script, I'm not sure it's possible to observe it's creation, with the exception of using a timer to poll for it.

Depending upon the browsers you need to support there are DOMNodeInserted and DOMNodeInsertedIntoDocument events. Can't vouch for how well they work myself but theoretically you could bind to these events and then either check the new node and the possible subtree that was inserted, or just check the entire document again with a $(selector) of your choosing to detect the node you're waiting to see added.

Try these:

var el = jQuery('<h1>HI HI HI</H1>');    
jQuery('body').append(el);
setTimeout(function(){
    window.alert('loaded');
},1000);//delay execution about 1 second

or to be safe this one:

var el = jQuery('<h1>HI HI HI</H1>');    
jQuery('body').append(el);
window.checker = setInterval(function(){
    if($('someselector').length>0){ //check if loaded
         window.alert('loaded');             
         clearInterval(window.checker);
    }    
},200);

basically, this will loop every 200ms until the selector gets result, and terminates the loop when the result is available