jQuery 1.9中live()的替代方法on()不起作用

Question

我有一段关于加载新内容的ajax方法的代码。
但是我遇到了新内容的问题，链接没有应用我设置的操作，比如preventDefault和ajax方法，在加载新内容后点击链接会使页面重新加载，就好像根本没有ajax代码一样。
在JQ1.8中使用live()方法可以很好地工作，但在更新jQuery之后，使用on()方法不如预期的那样工作。

旧代码正常工作，没有任何问题。

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

谢谢：）

- Déjà Bond

---

"...不像应该那样工作..."。语法错误，请检查使用委托的 on 的手册。 - elclanrs

这不是使用on进行事件委托的正确方式。你是否阅读过http://api.jquery.com/live/？ - Bergi

顺便提一下，有数百个类似的问题和重复问题：https://dev59.com/7mox5IYBdhLWcg3w9o2h，https://dev59.com/mmkx5IYBdhLWcg3wCP6Y。如果人们只是花了5分钟搜索一下...我通过搜索“on not working jquery stackoverflow”找到了它，然后就有了两个非常好的结果。 - elclanrs

Answer 1

你不仅需要简单地将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。

- alex

Answer 2

为了方便使用，您可以像这样使用：

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

- Güven Altuntaş