CODEWITHSUNDEEP
javascriptjquery
Teja Kantamneni
Teja Kantamneni

Reputation: 17472

What is the difference between jQuery live() and liveQuery plugin?

The question says it all. Which one is better and when to use what, I never use jQuery live() as I am using liveQuery plugin for a couple of years, I am used to it and still continue using it. But I want to know the subtle differences between the two and when to use each of it?

Upvotes: 6

Views: 4715

Answers (4)

Jaime Montoya
Jaime Montoya

Reputation: 7701

One of the differences is that .live() is native to jQuery (http://api.jquery.com/live/) and .livequery() is a plugin. As you can see at http://api.jquery.com/live/, .live() was deprecated in jQuery 1.7, and removed in version 1.9.

Upvotes: 0

Pointy
Pointy

Reputation: 413737

The "live" function native to jQuery leverages the bubbling of events up the DOM. The "liveQuery" plugin, by contrast, uses the selector to find elements in the DOM and attach event handlers directly.

In my opinion you're way better off using the "live" function when possible, because it involves less DOM traversal etc. For example, hooking event handlers to things throughout a big table can be kind-of slow with liveQuery but not slow at all with "live". There may be some issues (with IE of course) that force you to use liveQuery sometimes, though jQuery 1.4 has improved "live" considerably.

edit — Update: Sep 2017

At this point, modern versions of jQuery centralize event handler registration in the .on() API. Briefly:

$(selector).live("event-name", handler);

would today be written with .on():

$(document).on("event-name", selector, handler);

The .on() API provides considerably more flexibility than the long-deprecated .live() method did, including the option of using any node in the DOM as the delegation point (like the old .delegate() did).

Upvotes: 5

Sean Hogan
Sean Hogan

Reputation: 2920

As Pointy said, live() leverages the bubbling of events up the DOM (event delegation). Also, for each $(selector).live(type, handler) call, jQuery only calls handler on the $(event.target).closest(selector) element - that is, the nearest matching ancestor-or-self element of the event target. And, of course, live() doesn't support anything like livequery( matchedFn, unmatchedFn ).

Implications:

  • $(selector).live() still requires a traversal of the DOM (obviously). However, if you load jQuery and attach live() handlers in the document head then there is no document body to search yet. Similarly if you insert new content into the page.
  • live() does less work when being configured - it doesn't have to attach handlers to every matched element
  • live() does more work in handling events - it has to traverse ancestors of the event target, finding elements that match the selector
  • $("div").live() is different to $("div").livequery() as it only works for the closest div to the event target
  • Similarly, $("div, p").live() is different to $("div").live(); $("p").live();

Upvotes: 3

Fitzchak Yitzchaki
Fitzchak Yitzchaki

Reputation: 9163

liveQuery plugin was created initially, and then was migrated to jQuery itself.

Upvotes: 1

Related Questions