Is livequery deprecated

Question

I'm looking at old code. I'm seeing that for elements that get added with ajax, there's lots of livequery code. Is livequery not needed anymore with the newer versions of jquery? Does anyone know after which version exactly it's not needed?

$("#somediv").livequery(function(){
    $(this).click(function(){

    });
});

Wondawonder

yes, livequery is dead. It's also an anti pattern – Catgut

@Catgut What replaces it? As of yet I've found no examples that serve its purpose. .on is for events, and the only jquery event that comes close is DOMNodeInserted which doesn't have wide browser support. – Microclimatology

@Microclimatology event delegation will solve your problem. If you need DOMNodeInserted your either building a complex templating system or your doing it wrong. If the former then just build a simple templating system instead – Catgut

@Catgut Wow really? You just made a whole host of invalid assumptions. I've seen plenty of valid uses of livequery and have yet to see an alternative that preserves separation of concerns. There are in deed initialization scenarios when dealing with dynamic content, particularly in single page applications, that are not tied to a specific event, and therefore event delegation will NOT solve the problem. If you believe otherwise, then provide an example. I've encountered the "you're doing it wrong" kind before, and you leave out any viable solution because your goal is to put others down. – Microclimatology

@Microclimatology give me a use-case for livequery. I'll give you a better alternative. – Catgut

@Catgut Here's a use case - a UserScript. I don't control the code that inserts elements into the page but I'd like my script to know when they are inserted. I have yet to see any other way to accomplish this. – Compo

Answer 1

livequery is an entirely different concept from .live().

The .live() method uses event delegation to handle events that occur anywhere on the page.

livequery will invoke handlers when DOM changes occur (via jQuery methods).

For the example below, when an element with class="some_class" is added to the DOM (or the class is added to an element), the first handler will run. When removed, the second.

$('.some_class').livequery( function() {

       // apply a plugin to the element
    $(this).somePlugin();

}, function() {

    // clean up after the element was removed

});

There should be little actual need for livequery, but in that rare case where you need to respond to DOM changes, and have no control over the jQuery that is causing those changes, it can be useful.

Peeling

@Raynos: I don't want to call it ugly, but I'd say that I would almost always suggest a different approach. – Peeling

It iterates the dom every time period looking for changes. It basically polls the dom, checks every bloody element and sees whether anything has changed. incredibly computationally expensive and just stupid, it doesnt even feature detect for dom mutation events – Catgut

@Raynos: I just took a look at the source and did a quick test, and your description of how livequery works isn't right. It does indeed wrap the jQuery methods with a function that invokes internal code before invoking the original. So when a method is called, it performs a DOM selection based on the original selector provided, and applies the callbacks if new elements were found. So there isn't any polling every time period of all the DOM elements. – Peeling

livequery is convenient when 1) you need to do something to the element when it is created (like run a plugin on a created element) or 2) when I need the binding to take place immediately on the element and I don't want to rely on delegation (perhaps other event handles higher up will stop the delegation before it gets to my handler) While 1) might be solvable by manually management the code when I'm going to load or change the dom - doing it with livequery is simpler. But there can be a performance hit, especially on older browsers so use sparingly. – Imperious

Answer 2

You have to use on() and attach the event to a parent or body. Ex :

$('#obj').livequery('click', function() { ... });
$('#obj').livequery(function() { ... });

become

$('body').on('click', '#obj', function() { ... });
$('body').on('DOMNodeInserted','#obj', function() { ... });

note that DOMNodeInserted is IE9+

Phebe

I can confirm that it works on FF 59. Thank you very much for this tip! – Hemostat