4

I have a scenario where JQuery 'on' & 'live' do not perform the same. Perhaps someone can point out why. I am using JQuery 1.7.2 with my project and in this build, 'live' has been replaced with 'on'. I am using the following code in a listing page. Basically, this page has an alphabetical bar that the user can click & will load all the clients with that last name. I would like the link to execute via ajax.

Code:

$("a.listajax").on("click", function (e) {
    e.preventDefault();
    var url = $(this).attr("href");
    $("div.content").load(url + " div.content");
    return false;
});

The problem here is that when I first load the page and click on a link, everything works fine. The page gets loaded via ajax. However, after that all the links lose their bindings & then if I click on any links, I get an entire page loads.

I replaced the 'on' with 'live' and the links started behaving perfectly, even on subsequent clicks.

What am I missing?

Skadoosh
  • 2,575
  • 8
  • 40
  • 53

2 Answers2

7

One does not simply replace .live with .on.

$("a.listajax").live('click', function(e))

Is equivalent to:

$(document).on('click', 'a.listajax', function(e))

Important

If there's a common ancestor for all your .listajax anchors that will not be removed from the DOM, you should use that (the deepest one possible) instead of document; this will improve performance.

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
1

That's the whole point of live(). It rebinds new DOM elements when they are created. There are a lot of similar questions on jQuery's site, like this one, because it can be a bit confusing.

According to the jQuery docs, you use live() to:

Attach an event handler for all elements which match the current selector, now and in the future.

The "...in the future" part is key, because on() does not have that.

woz
  • 10,888
  • 3
  • 34
  • 64
  • `As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.` http://api.jquery.com/live/ – Sarke Jun 13 '12 at 03:19
  • You are right. This is a bit confusing. So 'live' will rebind all events. Isn't 'on' supposed to do the same too? – Skadoosh Jun 13 '12 at 03:22
  • It doesn't look like it when I look at jQuery docs, and the question that Vega posted doesn't provide a clean alternative to `live()` in my opinion. Since `live()` still works, I think it's safe to use for now; just watch out in future versions. – woz Jun 13 '12 at 03:25
  • I guess Jack's answer doesn't look too bad, assuming it works. Have you tried it? – woz Jun 13 '12 at 03:28
  • @woz - I agree. It works so its safe to use for this release. However, Jack's solution also works. – Skadoosh Jun 13 '12 at 03:28