Automatically call jQuery functions on new dom elements

Question

Is it possible to call an jQuery function on newly matched items automatically?

For example I have the following code:

$(document).ready(function(){
    $('[draggable]').draggable();
});

This adds the 'draggable' to each element which matches [draggable] however when further along the road new elements with the attribute 'draggable' are added those are not getting the 'draggable()' function getting called on them.

Is it possible to monitor the DOM or something and also call this method on each new dom item which matches the selector?

I know there is something like this for 'click' events and such (the jquery delegate method) but as far as I know I can't seem to use that for this case.

Answer 1

Check "Mutation Events" there is an event called DOMNodeInserted maybe it helps you

by the way, check: JQuery - use element with DOMNodeInserted

Answer 2

You can use the arrive.js library that I developed for the exact same purpose (it uses MutationObserver internally). Usage:

document.arrive('[draggable]', function(){
    // 'this' refers to the newly created element
    $(this).draggable();
});

Answer 3

there was ".live()" for jQuery, but i see it's deprecated?! don't get the transformation from ".live()" to the new ".on()"-method currently, but take a look @ yourself and maybe ask in their forum... this should be the right way to do...

http://api.jquery.com/live/