4
// 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 在实时网站上启用和禁用输入类型。

4

3 回答 3

9

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

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

不起作用,事实上keyupandblur每次都会在文档而不是选择器上触发

如果变量中有元素,则无需执行此操作,因为无论如何您都有对元素的引用,只有在可以随时添加元素并且您没有引用它时才使用它。

所以

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

应该可以完美运行。

更深层次的外观

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

所以这意味着

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

如果2 is nullor omittedthen 1将用于event

于 2013-07-25T20:45:27.027 回答
4

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

selector 类型:String - 一个选择器字符串,用于过滤触发事件的选定元素的后代。如果选择器为 null 或省略,则始终在到达所选元素时触发事件。

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

于 2013-07-25T20:47:51.617 回答
1

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

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

...除非您有更大的上下文来创建此字符串或对其进行处理。

于 2013-07-25T20:58:39.333 回答