在点击jQuery的ajax调用，只能一次 [英] jquery ajax call on click, only works once
问题描述
我有这个简单的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');
});
这篇关于在点击jQuery的ajax调用，只能一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
