Javascript 在事件委派中传递jQuery对象

为什么这些代码片段的行为似乎有所不同？虽然第一个似乎工作得很理想，即keyup和blur实际上应用于keyup和blur事件上的选择器，而另一个似乎工作得不理想，但它的行为就像代码段一直在运行一样

---

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

您不能像这样通过该函数传递元素，它必须是

字符串

选择器

// 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
});

不起作用，事实上，

键控

和

模糊

每次都会在文档而不是选择器上触发

如果变量中有元素，则无需执行此操作，因为您对该元素有引用，但仅当可以随时添加元素而您没有对该元素的引用时，才使用此操作

所以

应该可以很好地工作

深入观察

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

这意味着

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

---

如果2为

null

或

省略

，则1将用于

事件

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

选择器类型：String-用于筛选的后代的选择器字符串 触发事件的选定元素。如果选择器为空 或忽略，事件总是在到达所选位置时触发 元素

---

我相信这就是你想要做的：

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

上面的操作将起作用（将字符串变量作为选择器传递），但为什么不只是：

// 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
});

---

…除非您在更大的上下文中创建此字符串或对其执行某些操作。

检查文档：“[selector]一个选择器字符串，用于筛选触发事件的选定元素的后代。如果选择器为null或省略，则事件始终在到达选定元素时触发。”

$（“输入”）[name=selector\u 1\u id]”

不是选择器！@KevinB是的，它是从哪里来的。@KevinB它来自问题。它不是选择器，它是包含元素的jQuery对象。在这种情况下，选择器必须是字符串，如.on.With

$（selector\u id）.on（'keyup blur'，function（）的文档中所述

，未使用委派。由于@JohnSmith正在使用委派，我假设正在动态添加

selector\u 2\u id

的目标，并且在没有委派的情况下无法工作。此外，当

selector\u 2\u id

已经是jquery对象时，您似乎正在jquery对象中包装

selector\u 2\u id

。如果元素存储在一个变量中，然后它当然会工作，是的，它是一个我没有意识到的对象。好的，谢谢你编辑你的答案，现在它更清晰了…第二种方法似乎更好，我现在正在使用它。再次非常感谢！

// 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
});

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

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