How to apply a function as soon as an element appears in jQuery?

Question

I know in jQuery that there's the function live() to suscribe to events as soon as an element appears. I just want to do something to an element as soon as it appears. I tried suscribing the elements to the "load" event but it doesn't work. How do you go about that?

See this question: http://stackoverflow.com/questions/3840149/jquery-live-event-for-added-dom-elements — Alex Peattie, Oct 23 '11 at 05:34

score 1 · Answer 1 · answered Oct 23 '11 at 05:42

you can't use load to all elements . only : Img Body Iframe.

and you can't listen via live to the load event of elements other the ones i mentioned.

what you can do - is when you add them to the Page - Then you know when its happened and then you can call your func.

score 1 · Accepted Answer · answered Oct 23 '11 at 05:50

If you control the code which creates and appends elements, you could trigger a custom event and handle it in a handler later.

Example

$('#add').click(function() {
    $('#container').append($('<div>Hello! I am a new div</div>')).trigger('div-added');
});

$('#container').bind('div-added', function() {
    alert('A div has been added');
});

score 0 · Answer 3 · answered Oct 23 '11 at 05:45

0

Use .delegate() http://api.jquery.com/delegate instead of .live()

For your specific case consider livequery http://docs.jquery.com/Plugins/livequery

answered Oct 23 '11 at 05:45

Moin Zaman

25,281
6
70
74

score 0 · Answer 4 · answered Oct 23 '11 at 05:55

0

You can listen to DOMNodeInserted. I know that works in Webkit and Firefox - I don't know about IE though.

It would look something like this:

$('body').bind('DOMNodeInserted', function(evt) {
    var addedElement = evt.target;
    // do whatever with `addedElement`...
})

answered Oct 23 '11 at 05:55

Lee

13,462
1
32
45

`DOMNodeInserted` and other DOM mutation events have been deprecated in DOM 3. See http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents. – Sahil Muthoo Oct 23 '11 at 06:00

How to apply a function as soon as an element appears in jQuery?

4 Answers4