live() alternative on() not working jQuery 1.9

Question

I have code do ajax method for loading new content
But I have problem with the new content, the links not applying the action i did like
preventDefault and the ajax method, just after loading the new content
clicking on links make the page reload like there was no ajax code at all
In JQ 1.8 working grate with live() method, but after updating jQuery, not working as it should with on() method

The old code working right and have no problem with it

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
function loadContent(url){
        $.ajax({
            url: url,
            dataType: 'html',
            cache: false
        }).done(function(html){
            var $html = $(html);

            $('title').html($html.filter('title').text());
            $('#main').replaceWith($html.find('#main'));
            $('.nav-menu').replaceWith($html.find('.nav-menu'));
            $('.nav-below').replaceWith($html.find('.nav-below'));
        });
}

$(function(){

    // Get The Content Action
    $('.nav-menu li a,#nav-below a,#main a').live('click',function(e) {
        href = $(this).attr("href");

        loadContent(href);

        history.pushState('', 'New URL: '+href, href);
        e.preventDefault();

        // go top after showing the content
        $('html, body').animate({scrollTop:0}, 'slow');
    });

    // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
    window.onpopstate = function(event){
        loadContent(location.pathname);
        $('html, body').animate({scrollTop:0}, 'slow');
    };

});
</script>

The new updated code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function loadContent(url){
        $.ajax({
            url: url,
            dataType: 'html',
            cache: false
        }).done(function(html){
            var $html = $(html);

            $('title').html($html.filter('title').text());
            $('#main').replaceWith($html.find('#main'));
            $('.nav-menu').replaceWith($html.find('.nav-menu'));
            $('.nav-below').replaceWith($html.find('.nav-below'));
        });
}

$(function(){

    // Get The Content Action, ‡‡=‡=‡=‡=L0000K HERE=‡=‡=‡=‡‡ Not workin JQ 1.9
    $('.nav-menu li a,#nav-below a,#main a').on('click',function(e) {
        href = $(this).attr("href");

        loadContent(href);

        history.pushState('', 'New URL: '+href, href);
        e.preventDefault();

        // go top after showing the content
        $('html, body').animate({scrollTop:0}, 'slow');
    });

    // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
    window.onpopstate = function(event){
        loadContent(location.pathname);
        $('html, body').animate({scrollTop:0}, 'slow');
    };

});
</script>

The problem right here

$('.nav-menu li a,#nav-below a,#main a').on('click',function(e) {

Thank you :)

_"...not working as it should..."_. Wrong syntax, check manual for `on` with delegation. — elclanrs, May 09 '13 at 08:02
That is not how event delegation is done with `on`. Have you read http://api.jquery.com/live/? — Bergi, May 09 '13 at 08:02
Btw, there are hundreds of similar questions and duplicates: http://stackoverflow.com/questions/8867194/jquery-on-not-working-with-dynamic-dom-html, http://stackoverflow.com/questions/9484295/jquery-click-not-working-for-dynamically-created-items. If just people searched for 5 minutes... I found it by looking for "on not working jquery stackoverflow" and baam the two very first results. — elclanrs, May 09 '13 at 08:08

score 26 · Accepted Answer · answered May 09 '13 at 08:02

You don't simply s/live/on, you need to read the documentation of on() to see the changes required to update your code (on is similar to the old delegate()).

If you want to make it work exactly like live(), try...

$(document).on('click', '.nav-menu li a,#nav-below a,#main a', function(e) { });

However, if you can, you're better off choosing the most common persistent ancestor. This means that the events won't have to go all the way up to document to be handled. For example, body probably covers 99.9% of situations. However, it's probably more like #some-container.

score 0 · Answer 2 · answered Sep 25 '14 at 13:49

for easy usage you can use something like this:

$.fn.follow = function (event, callback) {
  $(document).on(event, $(this).selector, callback);  
}

and you can use it like:

$("#myselector").follow("click",function(){
   /*some callback code*/
});

you can still use event data in your plugin

$("#expform").follow("submit",function(e){
       e.preventDefault();
});

live() alternative on() not working jQuery 1.9

2 Answers2