Jquery .on versus .live

Question

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

Answer 1

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
});

Answer 2

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

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

Answer 3

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.

Answer 4

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/