Question

// 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实际上应用于keyup和blur事件上的选择器，而另一个似乎在理想情况下不起作用，它的行为类似于片段始终保持运行。 / p>

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

Answer 1

你不能像这样通过那个函数传递一个元素，它必须是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

Answer 2

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

selector类型：String - 用于过滤后代的选择器字符串触发事件的选定元素。如果选择器为null 或者省略，事件总是在到达所选事件时触发元件。

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

Answer 3

我相信这就是你要做的事情：

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

...除非您有更大的上下文来创建此字符串或使用它执行某些操作。

在事件委托中传递jQuery对象

3 个答案: