我有这个简单的jQuery code。在单击它得到标记的URL，加载该旁边的当前内容网页，幻灯片，并删除旧的内容。 页面的状态是完全和以前一样，相同的元素没有多余的类或样式。 问题是，下一个Ajax调用是行不通的。也许我需要.unbind（）的东西？
我是新来的jQuery和javascript所以我完全迷失了方向。非常感谢您的帮助:)
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
loadPage（）;
}）;
功能loadPage（URL）{
如果（网址==未定义）{
$（'身体'）的负载（'index.html的标题：首先，＃内容，页脚，hijackLinks）;
} 其他 {
$获得（URL，功能（数据）{
$（身体）追加（数据）。
$（'身体GT;元）。remove（）方法;
$（'身体GT;链接）。remove（）方法;
$（'身体GT;标题）。remove（）方法;
$（'身体'）追加（方向）;
SM = $（窗口）.WIDTH（）;
如果（方向==leftnav）{
$（'身体GT;标题：最后，身体GT;＃内容：去年，页脚：最后的）。CSS（左， - + SM +PX）;
footerheight = $（'身体GT;＃内容：去年'）outerHeight（假）+ $（'身体GT;标题：最后的）。outerHeight（真正的）;
$（'脚注：最后'）的CSS（顶，footerheight）。
$（'身体GT;头部，身体GT;＃内容，页脚）。CSS（ - WebKit的过渡期间，0.5秒）
$（'身体GT;头部，身体GT;＃内容，页脚）。CSS（ - WebKit的变换，翻译（+ SM +PX，0px））;
};
如果（方向！=leftnav）{
$（'身体GT;标题：最后，身体GT;＃内容：去年，页脚：最后的）。CSS（左，SM +PX）;
footerheight = $（'身体GT;＃内容：去年'）outerHeight（假）+ $（'身体GT;标题：最后的）。outerHeight（真正的）;
$（'脚注：最后'）的CSS（顶，footerheight）。
$（'身体GT;头部，身体GT;＃内容，页脚）。CSS（ - WebKit的过渡期间，0.5秒）
$（'身体GT;头部，身体GT;＃内容，页脚）。CSS（ - WebKit的变换，翻译（ - + SM +PX，0px））;
};
的setTimeout（函数（）{
$（'身体GT;标题：没有（：最后一个），身体GT;页脚：没有（：最后一个），身体GT;＃内容：没有（：上）），删除（）。
}，500）;
的setTimeout（函数（）{
$（'身体GT;头部，身体GT;躯，身体GT;＃内容）removeAttr（风格）。
}，500）;
}）;
}
}
功能hijackLinks（）{
$（'A'）。点击（函数（五）{
即preventDefault（）;
loadPage（e.target.href）;
方向= $（本）.attr（类）;
}）;
}
＆LT; / SCRIPT＆GT;
解决方案
由于您加载内容dynmically正在取代你的的内容身体事件处理程序是最有可能是不是会继续保持。
要解决这个问题，你需要调整你的点击处理程序，以使用生活（）或委托（）
$（'A'）。住（点击，功能（五）{
即preventDefault（）;
loadPage（e.target.href）;
方向= $（本）.attr（类）;
}）;
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?
I'm new to jquery and javascript so i'm quite lost. Thanks a lot for your help :)
<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>
解决方案
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()
$('a').live("click", function(e){
e.preventDefault();
loadPage(e.target.href);
direction = $(this).attr('class');
});
相关推荐
最新文章