我有这个简单的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>
由于您正在动态加载内容,因此替换body事件处理程序的内容的可能性极高。
body
要解决此问题,您需要调整点击处理程序以使用live()或delegate()
live()
delegate()
$('a').live("click", function(e){ e.preventDefault(); loadPage(e.target.href); direction = $(this).attr('class'); });