Question

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

$(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变量是未知的。

Answer 1

使用event delegation。

让我假设您正在加载Ajax内容的容器元素称为#ajax_container。然后你可以使用：

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

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

Answer 2

如果不使用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;
      }
});

在textarea中键入时禁用javascript函数

2 个答案: