live() thay thế vào() không làm việc jQuery 1.9

Question

tôi có mã làm phương pháp ajax cho tải nội dung mới
Nhưng tôi có vấn đề với các nội dung mới, các liên kết không áp dụng các hành động tôi đã làm như
preventDefault và ajax phương pháp, ngay sau khi tải nội dung mới
nhấp vào liên kết làm cho trang tải lại như không có mã ajax ở tất cả
Trong JQ 1.8 làm việc grate với phương thức live(), nhưng sau khi cập nhật jQuery, không hoạt động() phương thức

Mã cũ hoạt động đúng và không có vấn đề với nó

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

Các cập nhật mới đang

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

Vấn đề ngay tại đây

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

Cảm ơn bạn :)

Answer 1

Bạn không chỉ đơn giản là s/live/on, bạn cần phải đọc tài liệu của on() để xem các thay đổi cần thiết để cập nhật mã của bạn (on tương tự như cũ delegate()).

Nếu bạn muốn làm cho nó hoạt chính xác như live(), hãy thử ...

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

Tuy nhiên, nếu bạn có thể, bạn nên lựa chọn các tổ tiên dai dẳng phổ biến nhất. Điều này có nghĩa là các sự kiện sẽ không phải đi hết mức tối đa document để được xử lý. Ví dụ: body có thể bao gồm 99,9% số trường hợp. Tuy nhiên, nó có thể giống như #some-container.

Answer 2

để sử dụng dễ dàng, bạn có thể sử dụng một cái gì đó như thế này:

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

và bạn có thể sử dụng nó như:

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

bạn vẫn có thể sử dụng dữ liệu sự kiện trong plugin của bạn

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