2

First off, I don't want another plugin to do this... jQuery already has the functionality to do 99% of what I want with the live() method.

Basically, I want to change this:

$(".some-button").live("click", function() { alert('yay!'); });

into this:

$(".some-button").live(function() { alert('yay!'); });

So, what I'm saying is that I want to fire a method right away when an element is added to the page... jQuery can already do this SOOO close because that's how it adds the "click" even in my example above!

How can I achieve this without adding another plugin, but rather, just by using the same functionality as the "live" and "die" methods do?

Timothy Khouri
  • 31,315
  • 21
  • 88
  • 128
  • This might help: http://stackoverflow.com/questions/815074/jquery-doesnt-see-new-elements – Kon Jul 03 '11 at 17:46

3 Answers3

4

Here's some code I've copied and pasted that seems to work in fiddle, at least on FF: http://jsfiddle.net/KQBzn/

$(document).bind('DOMNodeInserted', function(event) {
      alert('inserted ' + event.target.nodeName + // new node
            ' in ' + event.relatedNode.nodeName); // parent
});

source: http://forum.jquery.com/topic/how-to-get-notified-when-new-dom-elements-are-added

bbg
  • 2,892
  • 3
  • 19
  • 13
2

There isn't any cross-browser way to do this, and there's nothing in jQuery itself that allows it.

You'd have to use a plugin, or just manage invoking code for your new elements manually.

The the live()[docs] method and the delegate()[docs] method are only for event handling. The code you give them will only respond to browser events, not to DOM manipulation.

The reason .live() won't do this is because it does not run any code when adding new elements to the DOM. It isn't monitoring any DOM changes. Rather it is responding to events that bubble to the document, and invoking the handler if it matches the selector you gave it.

user113716
  • 318,772
  • 63
  • 451
  • 440
  • Ahh, now I understand... "live" isn't adding a click event handler to the object once appended... but rather, it is adding a "click" to the page, and then when the element in question matches the criteria, then it also invokes upon that element! – Timothy Khouri Jul 03 '11 at 18:47
  • @Timothy: Exactly. It's a common misconception about `.live()`. It's just event delegation for the entire document. That's why I'd prefer to use `.delegate()`, which is exactly the same, but lets you make the delegate something more focused than the whole document. – user113716 Jul 03 '11 at 18:51
0

You can't do it with the .live() method.

It seems jQuery should add a feature to the .live() method so that if its used with a specific keyword like 'created' instead of an event name then it will let you execute a function for the created element. That'd be cool! For example, the ideal scenario would be like this:

$('.foobar').live('created', function() {
    // do something with each newly created .foobar element here.
});
trusktr
  • 44,284
  • 53
  • 191
  • 263