在新的dom元素上自动调用jQuery函数

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/

Answer 4

.on() is what you need if you are running jQuery 1.7 or later. It will run on elements as they are added to the page, as well as those already in place when it's called. If you're using an earlier version, take a look at the .live() method, which has since been deprecated but has the same functionality with added elements.

Answer 5

Depending on which version of jQuery you're using, look into the .on() method . If I understand what you're looking for here, it should meet your needs.

The equivalent in previous versions of the framework was .live() .