在事件委托中传递jQuery对象

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事件上的选择器,而另一个似乎无法正常工作,它的行为类似于片段始终保持运行.

我正在使用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那么将使用1event