6

我有代码做 ajax 方法来加载新内容
但是我对新内容有问题，链接没有应用我所做的操作，比如
preventDefault 和 ajax 方法，就在加载新内容之后
点击链接使页面重新加载就像有根本没有 ajax 代码
在 JQ 1.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) {

谢谢 ：）

4

2 回答 2

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-09T08:02:22.853 回答
0

为了方便使用，您可以使用以下内容：

$.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-25T13:49:29.730 回答