9

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Matthijn
  • 3,126
  • 9
  • 46
  • 69
  • possible duplicate of [Jquery - run function when DOM element is added](http://stackoverflow.com/questions/5753362/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 Aug 26 '12 at 20:58

5 Answers5

4

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

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

Community
  • 1
  • 1
Mario Corchero
  • 5,257
  • 5
  • 33
  • 59
  • 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. – nnnnnn Aug 26 '12 at 21:39
  • 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) – Mario Corchero Aug 26 '12 at 21:58
  • 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). – nnnnnn Aug 26 '12 at 22:58
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();
});
Uzair Farooq
  • 2,402
  • 3
  • 24
  • 37
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/

TheHe
  • 2,933
  • 18
  • 22
  • 3
    `.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. – nnnnnn Aug 26 '12 at 21:40
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.

Sam
  • 175
  • 2
  • 7
  • 5
    `.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. – nnnnnn Aug 26 '12 at 21:44
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().

kprobst
  • 16,165
  • 5
  • 32
  • 53
  • 3
    `.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. – nnnnnn Aug 26 '12 at 21:41