jquery ajax调用点击，只能工作一次

I have this simple jquery code. On click it gets the URL of the tag, loads that page next to the current content, slides it and removes the old content. The state of the page is EXACTLY the same as before, same elements no extra classes or styles. The problem is that the next ajax call just doesn't work. Maybe I need to .unbind() something?

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

I'm new to jquery and javascript so i'm quite lost. Thanks a lot for your help :)

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

2 个解决方案

#1

Since you are loading content dynmically which is replacing the contents of your body your event handler is most likely is not going to remain.

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

To fix this you need to adjust your click handler to use either live() or delegate()

要解决此问题，您需要调整单击处理程序以使用live（）或delegate（）

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

});

#2

for anyone reading post 2013 'on' is the new way of doing it now 'live' has been depreciated (example from wordpress pagination):

对于任何阅读2013年“开启”的人来说，现在“实时”的新方式已被折旧（例如来自wordpress分页）：

/*******ajax pagination*******/
jQuery(document).on('click', '#pagination a', function(e){  
  e.preventDefault();  
  var link = jQuery(this).attr('href');  
  jQuery('#content').html('Loading...');  //the 'main' div is inside the 'content' div
  jQuery('#content').load(link+' #main');
});

the .live() function has been depreciated so use .on() instead. obviously the jQuery library is needed too.

.live（）函数已被折旧，因此请改用.on（）。显然，jQuery库也是必需的。

#1