1

我有一个带有以下简单功能的照片库，可以使用键盘上的箭头键导航到上一张/下一张照片：

$(function() {
    var navEnabled = true;

    $(document).keyup(function(e) {
        if (navEnabled) {
            switch(e.keyCode) {
                case 37 : window.location = $('.prev').attr('href'); break;
                case 39 : window.location = $('.next').attr('href'); break;
            }
        }
    });

    $('#comment_area').bind('focus', function (event) {
        navEnabled = false;
    }).bind('blur', function (event) {
        navEnabled = true;
    });
});

在每张照片下方，我有一个 html textarea 元素（！在页面加载时通过 AJAX 加载！），id为#comment_area以对照片发表评论，我正在寻找一种解决方案，以在键入时禁用键盘照片导航然后再次打开。上面的代码似乎不起作用，我猜这是因为 textarea 元素是通过 AJAX 加载的。我试图将 .bind 函数代码移动到 AJAX 请求中，所以它会知道#comment_area id，但是 navEnabled 变量是未知的。

4

2 回答 2

1

使用事件委托。

让我假设您将 Ajax 内容加载到其中的容器元素称为#ajax_container. 然后你可以使用：

$('#ajax_container').on( 'focus', '#comment_area', function (event) {
    navEnabled = false;
}).on( 'blur', '#comment_area', function (event) {
    navEnabled = true;
});

您使用的是什么版本的 jQuery？此代码适用于 1.7+，需要针对旧版本进行调整。

于 2013-06-06T16:25:02.070 回答
0

如何不使用以下方法将其绑定到该特定元素not()：

$(document).not('#comment_area').on('keyup', function(e) {
      switch(e.keyCode) {
          case 37 : window.location = $('.prev').attr('href'); break;
          case 39 : window.location = $('.next').attr('href'); break;
      }
});
于 2013-06-06T16:24:53.683 回答