15

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

    });
});
sameold
  • 18,400
  • 21
  • 63
  • 87
  • 4
    yes, livequery is dead. It's also an anti pattern – Raynos Oct 06 '11 at 14:17
  • 2
    @Raynos 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. – AaronLS Feb 04 '13 at 20:44
  • 1
    @AaronLS 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 – Raynos Feb 05 '13 at 03:18
  • 4
    @Raynos 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. – AaronLS Feb 05 '13 at 17:42
  • @AaronLS give me a use-case for livequery. I'll give you a better alternative. – Raynos Feb 06 '13 at 18:10
  • 4
    @Raynos 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. – Nathan Osman Dec 02 '15 at 19:24

2 Answers2

15

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.

user113716
  • 318,772
  • 63
  • 451
  • 440
  • @Raynos: I don't want to call it ugly, but I'd say that I would almost always suggest a different approach. – user113716 Oct 06 '11 at 14:27
  • 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 – Raynos Oct 06 '11 at 14:30
  • 9
    @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. – user113716 Oct 06 '11 at 17:13
  • 2
    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. – Yehosef Jul 09 '14 at 14:35
6

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+

Reign.85
  • 2,420
  • 1
  • 28
  • 28