24

I know that .live() is now deprecated but I cannot seem to change it and keep the functionality.

I just have a quick question about the .on() function in jQuery. I'm currently using .live() here

Like so: 

$('table tr th').live("click", function() {
});

But, when I try and replace .live() with .on() it no longer works as it's supposed to.

I've tried putting in 

$('table tr th').on("click", function() {
});

as well as 

$('table tr').live("click", "th", function() {
});

and 

$('table tr').delegate("th", "click", function() {
});

but to no avail.

Why is this and what steps can I take to make it work properly?

Ravi Ram
  • 24,078
  • 21
  • 82
  • 113
ayyp
  • 6,590
  • 4
  • 33
  • 47
  • 1
    possible duplicate of [jQuery 1.7 - Turning live() into on()](http://stackoverflow.com/questions/8021436/jquery-1-7-turning-live-into-on) – Felix Kling Dec 12 '11 at 16:54
  • @FelixKling I'm trying to avoid using `$(document)` to mimic the call exactly. I was wondering if there was another way to do it that's more in line with the examples on the jQuery API site. – ayyp Dec 12 '11 at 16:58
  • Simply take the closest existing element (ancestor) (which would more correspond to `.delegate` then). – Felix Kling Dec 12 '11 at 16:59

4 Answers4

31

The on() function requires a syntactical update, you should alter your code to:

$('body').on("click", "table tr th", function()...

Check out this article for more info: http://www.andismith.com/blog/2011/11/on-and-off/

Tom Walters
  • 15,366
  • 7
  • 57
  • 74
11

Try this:

$('table tr th').live("click", function() {

should be

$(document).on("click", "table tr th", function() {

That is how you would mimic the .live call exactly. You could of course limit your selector from document to something more meaningful based on your DOM structure.

Edit:

Just to clarify, in your example, you are required to use $(document).on(... because the table doesn't have any parents and is replaced during the life of your page.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • So because I'm replacing the table in the code I need to use `$(document)` so that the call continues to work throughout? – ayyp Dec 12 '11 at 17:00
  • @Andrew: No, any existing element in the hierarchy will do. – Felix Kling Dec 12 '11 at 17:05
  • If the event can not be attached to the element itself, it must be attached to a higher element in the hierarchy that always exists. Like document oder body. – Tillito Nov 02 '13 at 16:17
2

Ensure that the selected element (the th/tr) exists when the page is loaded initially. The new .on won't work if this selector is added later to the DOM.

Try

$('body').on('click', 'thesSelectorForYourTriggerElement', function(){
    //callback
});
Jay
  • 2,141
  • 6
  • 26
  • 37
0

I somehow guess that you are adding tr elements into your table, not th.

$('table').on("click", "tr th", function(){});
Ski
  • 14,197
  • 3
  • 54
  • 64
  • The ``s are generated from an array and written into the first `` of the table. Your solution does not work though... – ayyp Dec 12 '11 at 16:58
  • That won't work, his table gets replaced using `.replaceWith()` – Kevin B Dec 12 '11 at 16:58