在事件委托中传递jQuery对象 [英] Passing a jQuery object in event delegation

问题描述

  // Snippet 1 
 $（document）.on（keyup blur，＃selector_1_id，function（）{
 // DO SOMETHING 
}）; 
 
 $（document）.on（keyup blur，＃selector_2_id，function（）{
 // DO SOMETHING 
}）; 
 
 
 //代码段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在实时网站上启用和禁用输入类型。

解决方案

您无法通过该函数传递元素，它必须是字符串选择器。

  $（document）.on（keyup blur，selector_2_id，function（）{
 // DO SOMETHING 
}）; 
  

无效，实际上 keyup 和 blur 将在文档而不是选择器上每次触发

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

所以

  selector_2_id.on（'keyup blur'，功能（）{
 // DO SOMETHING 
}）; 
  

应该完美运作。

更深的外观

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

那么这意味着什么

  $（document）.on（'keyup blur'，selector_2_id，function（）{
 ^ ---- -  ^ = 1 ^ ----------- ^ = 2 
}）; 
  

如果 2 是 null 或省略然后 1 将用于事件

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

Why do these snippets seem to be behaving differently? While the first one actually seems to work as ideal, that is keyup and blur being actually applied on the selector on keyup and blur event, while the other seems to be not working that ideally, it behaves like the snippet keeps on running always.

I am enabling and disabling input types on the live website using JavaScript.

解决方案

You cannot pass a element through that function like that, it has to be the string selector.

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

Won't work, in-fact the keyup and blur will be triggered every single time on the document rather than the selector

If you have the element in a variable there is no need to do this because you have a reference to the element anyway you only use this if the element can be added any time and you don't have a reference to it.

So

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

Should work perfectly.

Deeper look

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

So what this means is this

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

If 2 is null or omitted then 1 will be used for the event

这篇关于在事件委托中传递jQuery对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！