How to Replace Jquery.live() with Jquery.on()?

Question

I am using Jquery current version 2.1.x and .live() function is deprecated in new version according to the jQuery API. It is recommended to use 'on' instead. I have some javascript written with .live() function. I don't understand how to replace .live() with .on().

Below is my code:

jQuery

$('#container .pagination li.active').live('click',function(){
    var page = $(this).attr('p');
    RelatedCatLink(eleme,page);
});

$('#go_btn').live('click',function(){
    var page = parseInt($('.goto').val());
    RelatedCatLink(eleme,page);

    var no_of_pages = parseInt($('.total').attr('a'));
    if (page != 0 && page <= no_of_pages) {

    } else {
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }
});

Answer 1

The idea behind live was to have the ability to attach events to elements that are not yet in the DOM:

$('body').append($('<div id="new-el">))
$('#new-el').live('click', function { ... } );

In newer versions of jQuery it is now recommended to change such code to:

$('body').append($('<div id="new-el">))
$('body').on('click', '#new-el', function { ... } );

This will attach the click event to the body tag, but the function will run only if the element that was clicked inside the body tag is #new-el.

In your case - if the elements are created on-the-fly (after the DOM is loaded) you can change your code to:

$('body').on('click', '#container .pagination li.active' ,function(){
    var page = $(this).attr('p');
    RelatedCatLink(eleme,page);
});

$('body').on('click', '#go_btn', function(){
    var page = parseInt($('.goto').val());
    RelatedCatLink(eleme,page);

    var no_of_pages = parseInt($('.total').attr('a'));
    if(page != 0 && page <= no_of_pages){

    } else {
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }
});

Answer 2

Try something like below, replace live with on

$('#container .pagination li.active').on('click',function(){
    var page = $(this).attr('p');
    RelatedCatLink(eleme,page);
});

$('#go_btn').on('click',function(){
    var page = parseInt($('.goto').val());
    RelatedCatLink(eleme,page);

    var no_of_pages = parseInt($('.total').attr('a'));
    if(page != 0 && page <= no_of_pages){

    }else{
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }

});

The jQuery documentation points you at the .on() or .delegate() functions to update your code. jQuery.on() is a more generic event handler function, and it's what jQuery uses internally to map the high level event functions like .click(),.change() etc. that jQuery exposes.

Using jQuery.on() however is not a one to one replacement of the .live() function. While .on() can handle events directly and use the same syntax as .live() did, you'll find if you simply switch out .live() with .on() that events on not-yet existing elements will not fire. IOW, the key feature of .live() is not working.

You can use .on() to get the desired effect however, but you have to change the syntax to explicitly handle the event you're interested in on the container and then provide a filter selector to specify which elements you are actually interested in for handling the event for.

Answer 3

You can do as follow,

$( "'#container .pagination'" ).on( "click", " li.active", function() {
  var page = $(this).attr('p');
 RelatedCatLink(eleme,page);
});