0

我正在尝试使用键盘进行导航。我用 jquery 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>
4

2 回答 2

2

似乎这对你有用。

$('.next').click(function (event) {
  event.preventDefault();
  var href = this.href;
  $('.loading').fadeIn();
  $('.main-bg').load(href, function () {
    $('.loading').fadeOut();
  });
});

由于您总是需要这两个按钮，因此您不需要动态加载它们。此外，事件的数量将随着每次点击而增加。所以只替换main-bgdiv里面的内容。

更新：

另外，我注意到每当您更改图像时，您都会重新加载 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();
        });
    });
于 2013-01-14T18:44:04.403 回答
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 是唯一的...我更改了您的一些代码，但我认为没有必要。

于 2013-01-14T16:41:25.653 回答