是否可以在动态添加的文本输入上全局捕获 keydown？

Question

我正在使用以下全局 jQuery 来显示和隐藏加载 div 以进行 $.ajax 调用：

$(document).ajaxStart(function(){
    $("#loading").show();
}
$(document).ajaxStop(function(){
    $("#loading").hide();
}

这很好用，但我不想显示自动完成的加载 div，所以我添加了这个：

$("input[type=text]").keydown(function(){
    if($(this).hasClass('ui-autocomplete-input')) {
        window.suppressGlobal = true;
    }
});

然后，为“正常”$.ajax 调用重置 suppressGlobal，这样：

var origAjax = $.ajax;
$.ajax = function() {
    if (window.suppressGlobal) {
        arguments[0].global = false;
    }
    origAjax.apply(this, arguments);
    window.suppressGlobal = false;
};

这一切都适用于通过页面加载构建的文本输入。但是，我有几种情况是使用 jQuery/Javascript 在客户端动态插入文本输入，在这种情况下 keydown 事件不会绑定到全局函数。我也试过on：

$("input[type=text]").on('keydown', function(){
    if($(this).hasClass('ui-autocomplete-input')) {
        window.suppressGlobal = true;
    }
});

但这也不起作用。无论何时添加文本输入，有没有一种方法可以全局捕获 keydown 事件？我能否以某种方式全局捕获向 DOM 添加的文本输入并附加事件处理程序？

Answer 1

您必须使用$(document).on() 来动态创建控件。

jsfiddle:http://jsfiddle.net/G9qJE/

您也可以使用：$('body').on

解释： 分配事件时，它仅分配给页面上当前存在的元素。如果您稍后关注其他元素，则没有什么可以监视这些元素也允许它们被使用。 这就是为什么您需要位于文档级别的东西，它知道事件和您想要应用它的元素，以便它可以监视任何匹配的新元素并将该事件也应用到它们。

 $(document).on("keydown", "input[type=text]", function() { 
        if($(this).hasClass('ui-autocomplete-input')) {
            window.suppressGlobal = true;
        }

    });