jquery ajax 单击时调用，仅有效一次

Question

我有这个简单的 jquery 代码。单击时，它会获取标签的 URL，加载当前内容旁边的页面，滑动它并删除旧内容。 页面的状态与以前完全相同，相同的元素没有额外的类或样式。 问题是下一个 ajax 调用不起作用。也许我需要 .unbind() 一些东西？

我对 jquery 和 javascript 很陌生，所以我很迷茫。非常感谢您的帮助:)

<script  type="text/javascript">
    $(document).ready(function(){ 
        loadPage();
    });
    function loadPage(url) {
        if (url == undefined) {
            $('body').load('index.html header:first,#content,footer', hijackLinks);
        } else {
            $.get(url , function(data) {
                $('body').append(data);
                $('body>meta').remove();
                $('body>link').remove();
                $('body>title').remove();
                $('body').append(direction);
                sm = $(window).width();
                if(direction == "leftnav"){
                    $('body>header:last,body>#content:last,footer:last').css("left", "-" + sm + "px");
                    footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true) ;
                    $('footer:last').css("top", footerheight);
                    $('body>header,body>#content,footer').css("-webkit-transition-duration","0.5s")
                    $('body>header,body>#content,footer').css("-webkit-transform","translate(" + sm + "px,0px)");
                };
                if(direction != "leftnav"){
                    $('body>header:last,body>#content:last,footer:last').css("left", sm + "px");
                    footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true) ;
                    $('footer:last').css("top", footerheight);
                    $('body>header,body>#content,footer').css("-webkit-transition-duration","0.5s")
                    $('body>header,body>#content,footer').css("-webkit-transform","translate(-" + sm + "px,0px)");
                };
                setTimeout(function(){
                    $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last)').remove()
                },500); 
                setTimeout(function() {
                    $('body>header,body>footer,body>#content').removeAttr('style') 
                },500);
            });
        }
    }
    function hijackLinks() {
        $('a').click(function(e){
            e.preventDefault();
            loadPage(e.target.href);
        direction = $(this).attr('class');
        });
    }
</script>

Answer 1

由于您正在动态加载内容，这会替换 body 的内容，因此您的事件处理程序很可能不会保留。

要解决此问题，您需要调整点击处理程序以使用 live() 或 delegate()

$('a').live("click", function(e){
    e.preventDefault();
    loadPage(e.target.href);
    direction = $(this).attr('class');

});