在事件委派中传递 jQuery 对象

Passing a jQuery object in event delegation

本文关键字：jQuery 对象 事件 委派      更新时间：2023-09-26
// Snippet 1
$(document).on("keyup blur", "#selector_1_id", function() {
    // DO SOMETHING
});
$(document).on("keyup blur", "#selector_2_id", function() {
    // DO SOMETHING
});

// Snippet 2
var selector_1_id = $("input[name=selector_1_id]");
var selector_2_id = $("input[name=selector_2_id]");
$(document).on("keyup blur", selector_1_id, function() {
    // DO SOMETHING
});
$(document).on("keyup blur", selector_2_id, function() {
    // DO SOMETHING
});

为什么这些代码段的行为似乎有所不同？虽然第一个实际上看起来很理想，但实际上在 keyup 和 blur 事件时，键控和模糊实际上应用于选择器，而另一个似乎工作得并不理想，它的行为就像代码片段始终运行一样。

我正在使用JavaScript在实时网站上启用和禁用输入类型。

你不能像这样通过该函数传递元素，它必须是string选择器。

$(document).on("keyup blur", selector_2_id, function() {
    // DO SOMETHING
});

不起作用，实际上每次都会在文档而不是选择器上触发keyup和blur

如果你在变量中有元素，则没有必要这样做，因为无论如何你都有对该元素的引用，你只有在可以随时添加元素并且你没有对它的引用时才使用它。

所以 

selector_2_id.on('keyup blur', function() {
   // DO SOMETHING
});

应该完美地工作。

更深入的观察

一个选择器字符串，用于筛选触发事件的选定元素的后代。如果选择器为 null 或省略，则在到达所选元素时始终触发事件。

所以这意味着这个 

$(document).on('keyup blur', selector_2_id, function(){
  ^------^ = 1               ^-----------^ = 2
});

如果 2 null或omitted则 1 将用于event

根据 api，选择器需要是一个字符串而不是一个 jquery 对象

选择器类型：字符串 - 用于筛选其后代的选择器字符串 触发事件的选定元素。如果选择器为空 或省略，事件在到达所选时始终触发 元素。

http://api.jquery.com/on/

我相信

这就是您要做的：

// Snippet 2
var selector_1_id = "input[name=selector_1_id]";
var selector_2_id = "input[name=selector_2_id]";
$(document).on("keyup blur", selector_1_id, function() {
    // DO SOMETHING
});
$(document).on("keyup blur", selector_2_id, function() {
    // DO SOMETHING
});

以上将起作用(传递字符串 var 作为选择器(，但为什么不只是：

$(document).on("keyup blur", "input[name=selector_1_id]", function() {
    // DO SOMETHING
});
$(document).on("keyup blur", "input[name=selector_2_id]", function() {
    // DO SOMETHING
});

。除非您有一个更大的上下文来创建此字符串或对其进行某些操作。

相关文章：