現場（）替代（不工作的jQuery 1.9

我的代碼做AJAX方法，但我有新的內容問題，聯繫不適用的動作我不喜歡
的preventDefault和AJAX方法，只是在加載新內容
點擊鏈接使頁面重新加載，就像沒有任何AJAX代碼
在JQ 1.8工作柵格與live（）方法，但更新jQuery後，不工作，因爲它應該與（）方法
現場（）替代（不工作的jQuery 1.9

舊代碼正常工作並且沒有問題

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

新更新的代碼

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

這裏的問題

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

謝謝:)

來源

2013-05-09 Déjà Bond

_「......不應該如此......」。語法錯誤，請通過委派檢查'on'的手冊。 – elclanrs 2013-05-09 08:02:00

這不是事件代表團如何使用'on'完成的。你讀過http://api.jquery.com/live/嗎？ – Bergi 2013-05-09 08:02:57

順便說一句，有數百個類似的問題和重複：http://stackoverflow.com/questions/8867194/jquery-on-not-working-with-dynamic-dom-html，http://stackoverflow.com/questions/ 9484295/jQuery的點擊 - 不工作換動態創建項。如果只是人們搜索了5分鐘......我找到了「找不到jquery stackoverflow」並找到了兩個第一個結果。 – elclanrs 2013-05-09 08:08:26

你不只是s/live/on，你需要閱讀的文件on()查看更新代碼所需的更改（on類似於舊的delegate()）。

如果要使其工作正是像live()，嘗試...

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

但是，如果可以的話，你最好還是選擇最常見的持續性祖先。這意味着事件不會一直持續到達document。例如，body可能涵蓋99.9％的情況。但是，它可能更像#some-container。

來源

2013-05-09 08:02:22 alex

謝謝alex，我不明白，你向我解釋得很好 – 2013-05-09 08:25:12

，方便使用，您可以使用這樣的事情：

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

，你可以用它喜歡：

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

你仍然可以使用你的插件事件數據

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

來源

2014-09-25 13:49:29

現場（）替代（不工作的jQuery 1.9

回答

相關問題