On: Differences Between jQuery .bind() vs .live() vs ....

[blueprint]

Don't forget to check out livequery.

http://docs.jquery.com/Plugins/livequery

"Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated."

Oh so awesome.

[bretthopper → blueprint]

Why? That plugin was created before jQuery had .live() (which has since been made useless by the better delegate/on).

The only reason you should use this plugin is if you're stuck with jQuery <1.3.

[blueprint → bretthopper]

Perhaps I'm mistaken about this, especially since this article was my first time hearing about delegate, but I believe that live and delegate are only able to be used for existing DOM events like "click", etc., whereas livequery calls a function on occurrences like elements appearing in the DOM, for which there is no built-in way to watch with jQuery.

I usually use it to watch when elements appear and then bind handlers to them inside the callback. Kinda does away with the need for live.

[bretthopper → blueprint]

That's exactly what live/delegate/on does. You can bind events to "future" DOM elements.

You don't need to watch for the elements though. You just delegate the event to an element/selector higher in the DOM tree and use event propagation/bubbling.

I suggest you read up on event delegation.

[jaredsohn → bretthopper]

But can you detect when DOM elements are created? (Which is different than adding a click event to new DOM element.)

I was looking into this issue myself recently and ultimately (through advice on Stackoverflow) decided to just ignore jQuery and to use DOM mutation events. I'm still curious if there is a way to do this using jQuery, though.

While working on this I briefly considered livequery due to this StackOverflow post (http://stackoverflow.com/questions/4818020/livequery-perform...), but soon realized that this only intercepts DOM changes made via jQuery, and won't work with code in the wild (which is what I need since it is for a Chrome extension.)

[bretthopper → jaredsohn]

You can use the DOMNodeInserted event. Something like this:

document.addEventListener("DOMNodeInserted", function(event) { console.log($(event.target).parent()); });

That will log the element that gets inserted into the DOM.

[jaredsohn → bretthopper]

That's roughly what I'm doing now (i.e. DOM mutation events). It just isn't using jQuery.

[bretthopper → jaredsohn]

Is that a problem? You can use jQuery to wrap the event target like my example did. Or just do $(document).bind('DOMNOdeInserted', function () {}); Is that using jQuery enough? I suppose if you knew you were only using jQuery and wanted to modify the source, you could somehow hook into every function that modifies the DOM and go from there (which is what you just described with livequery).

Not really sure why your requirement is it needs to "use" jQuery though.

[jaredsohn → bretthopper]

Not really; my code is working fine as is. I think the "problems" were 1) I was curious if there was a way to do it via jQuery instead of DOM mutation methods (looks like no) and 2) the documentation for these jQuery methods doesn't specifically mention that this case isn't covered and that the developer should look at DOM events, although that is just perhaps assumed to be default behavior when working with jQuery.

I'm writing to the people who maintain the jQuery documentation now...