加载后jquery按键不起作用？

Question

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

Answer 1

看来这对你有用。

$('.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();
        });
    });

Answer 2

$(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 是唯一的...我更改了您的一些代码，但我认为没有必要。