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

Is it possible to capture keydown globally on dynamically added text inputs?

本文关键字：输入 全局 keydown 文本 动态 添加 是否      更新时间：2023-09-26

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

$(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的文本输入并附加事件处理程序吗？

对于动态创建的控件，必须使用$(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;
        }
    });
相关文章：