加载后jquery keypress无法正常工作?

时间:2013-01-14 16:35:55

标签: jquery

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

2 个答案:

答案 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在加载内容后是唯一的...我更改了一些代码,但我认为没有必要。