javascript - 在文本区域中输入时禁用 javascript 功能

Question

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

$(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+，需要针对旧版本进行调整。