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.

possible duplicate of Jquery - run function when DOM element is added I don't think .on() will work because that's only for binding events to new DOM elements, not running any function. — sachleen
– sachleen, Commented Aug 26, 2012 at 20:58

Community · Accepted Answer · 2017-05-23 10:31:06Z

4

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

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

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Aug 26, 2012 at 21:00

Mario Corchero

5,6256 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nnnnnn Over a year ago

The first sub-heading on that MDN page says "Avoid using mutation events". The w3 has deprecated them. Performance isn't great, and not all browsers support them anyway.

Mario Corchero Over a year ago

It is better to add that behaviour manually for sure, but if it is totally needed I don't see other solution (Mutations Observers would be great, but they are not really supported yet)

nnnnnn Over a year ago

It's the best solution for browsers that support it, yes. Otherwise you end up with something clunky like adding an appendDraggable() method and using it instead of .append() (which wouldn't be too bad if there weren't so many other ways to add elements).

Uzair Farooq · Accepted Answer · 2016-03-15 07:03:06Z

3

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();
});

edited Mar 15, 2016 at 7:03

answered Feb 26, 2015 at 6:03

Uzair Farooq

2,4473 gold badges24 silver badges38 bronze badges

Comments

TheHe · Accepted Answer · 2012-08-26 20:57:28Z

1

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/

answered Aug 26, 2012 at 20:57

TheHe

2,97221 silver badges24 bronze badges

1 Comment

nnnnnn Over a year ago

.live() (or the newer .delegate() and .on()) lets you attach an event handler that will run for elements added later, but it doesn't let you automatically apply a method like .draggable() to those elements.

Sam · Accepted Answer · 2012-08-26 21:30:49Z

1

.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.

answered Aug 26, 2012 at 21:30

Sam

1852 silver badges7 bronze badges

1 Comment

nnnnnn Over a year ago

.on() (or the older .delegate() or older still .live()) will attach an event handler that will run for elements added later, but it doesn't let you automatically apply a method like .draggable() to those elements.

kprobst · Accepted Answer · 2012-08-26 20:58:15Z

0

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().

answered Aug 26, 2012 at 20:58

kprobst

16.8k5 gold badges35 silver badges53 bronze badges

1 Comment

nnnnnn Over a year ago

.on() (or .delegate() or .live()) will let you attach an event handler that will run for elements added later, but it doesn't let you automatically apply a method like .draggable() to those elements.

Collectives™ on Stack Overflow

Automatically call jQuery functions on new dom elements

5 Answers 5

3 Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related