CODEWITHSUNDEEP
javascriptajaxjquery
Déjà Bond
Déjà Bond

Reputation: 301

live() alternative on() not working jQuery 1.9

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 :)

Upvotes: 6

Views: 21106

Answers (2)

G&#252;ven Altuntaş
G&#252;ven Altuntaş

Reputation: 253

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

Upvotes: 0

alex
alex

Reputation: 490413

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.

Upvotes: 26

Related Questions