我正在尝试使用键盘进行导航。我用jquerys load()函数加载新内容,但它只在第一次加载脚本时才有效,我听说你应该使用jquery live()函数来加载每一页但是它没有。 这是按键功能:
$(document).live("keydown", function(e){
if (e.keyCode == 49) {
$('.next').click();
}
if (e.keyCode == 50) {
$('.prev').click();
}
});
此代码位于每个加载的页面中。但只有在您第一次使用该页面时才会起作用,一次点击后它就不起作用了。为什么?什么.next和.prev做:
$('.next').click(function(event) {
event.preventDefault();
var href = this.href;
$('.loading').fadeIn();
$('#content').load(href, function(){
$('.loading').fadeOut();
});
});
然而,在使用鼠标一直加载后按.next和.prev会起作用。只是按键只能工作一次。
这是HTML结构:
<div id="content">
Image
<div class="nav">
<a href="page.php?id=1" class="prev">Prev</a>
<a href="page.php?id=2" class="next">Next</a>
</div>
</div>
答案 0 :(得分:2)
这样看似适合你。
$('.next').click(function (event) {
event.preventDefault();
var href = this.href;
$('.loading').fadeIn();
$('.main-bg').load(href, function () {
$('.loading').fadeOut();
});
});
由于您总是需要这两个按钮,因此您无需动态加载它们。此外,每次点击都会增加事件的数量。因此,只替换main-bg
div。
<强>更新强>
此外,我注意到您每次更改图片时都会重新加载javascript。这将产生问题。所以只将脚本添加到第一页。
如果您希望每次都加载脚本,请使用以下代码
$(document).keydown( function(e){
if (e.keyCode == 49) {
$('.next').click();
}
if (e.keyCode == 50) {
$('.prev').click();
}
});
$('.next').click(function(event) {
event.preventDefault();
var href = this.href;
$('.loading').fadeIn();
$('#content').load(href, function(){
$('.loading').fadeOut();
});
});
答案 1 :(得分:1)
$(document).on("keydown", function(e){
if (e.keyCode == 49) {
$('.next').trigger("click");
}
if (e.keyCode == 50) {
$('.prev').trigger("click");
}
});
$(document).on('click', '.next', function() {
var href = $(this).attr("href");
$('.loading').fadeIn();
$('#content').load(href, function(){
$('.loading').fadeOut();
});
return false;
});
请检查,#content在加载内容后是唯一的...我更改了一些代码,但我认为没有必要。