1

Possible Duplicate:
jQuery 1.7 - Turning live() into on()

I have with jQuery:

          $(".house td[red]").live("click", function() {
              alert('ok');
          });

but function live is deprecated. How can i use on?

          $(".house td[red]").on("click", function() {
              alert('ok');
          });

not working.

Community
  • 1
  • 1
Paul Magrets
  • 13
  • 2

8 Answers8

4
 $(".house").on("click", 'td[red]', function() {
              alert('ok');
          });

have you tried this? You can check in documentation for details. Example from there:

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

So you basically pass a "container" for wrapper. The reason why live is not recommended is that it can be written with "on" syntax like this:

$(document).on("click", '.house td[red]', function() {
              alert('ok');
          });

which you can see is not very efficient. Probably there's more to that :) so it is good you want to change it.

mkk
  • 7,583
  • 7
  • 46
  • 62
3

Use it as - 

$(document).on("click", ".house td[red]", function() {
  alert('ok');
});

The more efficient way is using .on() with immediate parent of the element - 

$('.house').on("click", "td[red]", function() {
      alert('ok');
});

Read here for better understanding of difference between live and on

Community
  • 1
  • 1
Dipak
  • 11,930
  • 1
  • 30
  • 31
  • I prefer mkk's solution. It's more efficient. – Christoph Aug 14 '12 at 13:57
  • by doing so you lose almost all advantage of `on` over `live`. From [jquery documentation](http://api.jquery.com/live/): "Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods: (...)`$(document).on(events, selector, data, handler); // jQuery 1.7+`(...)" – mkk Aug 14 '12 at 14:01
2

on() is an all-things-to-all-men function that can work in different ways - both with direct and delegated events. live() was a means of achieving delegated events. This is achieved with on() by passing a filter as param 2, and bumping the callback to param 3:

$(".house").on("click",  'td[red]', function() {
    alert('ok');
});
Mitya
  • 33,629
  • 9
  • 60
  • 107
1
$(document).on('click', '.house td[red]', function(){
    alert('ok');
});

Document is the static element we wish to attach our handler to.

First param is the event

Second param is the selector

Third param is the functions you wish to run against the selector when the event is fired.

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
1

It's a three-argument variant, and you get to pick the "bubble" point:

$('body').on('click', '.house td[red]', function() { alert("ok"); });

The difference is that with this, the point at which the actual event handler is placed is under your control (like with the also-deprecated .delegate()). You can pick any parent element you like, which is a nice feature in complicated pages. (In your case, for example, you could put the handler on all the ".house" elements instead of the body.)

Pointy
  • 405,095
  • 59
  • 585
  • 614
1

Try this,

$(document).on("click", ".house td[red]", function() {
     alert('ok');
});
Adil
  • 146,340
  • 25
  • 209
  • 204
1
$(".house td[red]").live("click", function() {
    alert('ok');
});

Would be directly converted to this:

$(document).on("click", ".house td[red]", function() {
    alert('ok');
});

But you can gain some performance by specifying the closest container that you know will exist at the time of the bind:

$('#someContainer').on("click", ".house td[red]", function() {
    alert('ok');
});
jbabey
  • 45,965
  • 12
  • 71
  • 94
0
$(document).on("click",".house td[red]",function(){
     alert('ok');
});
robasta
  • 4,621
  • 5
  • 35
  • 53