jQuery在收听错误元素时每个阻塞代码

Question

我想在所有click元素中添加selected个事件，问题是：

1. 为什么我不能使用el添加事件并成为听众。
2. 如果我使用el，则整个代码块停止运行并且似乎卡在每个循环中。

这是正确运行的代码

$( ".selected" ).each(function(index) {
    $(this).on("click", function(){

    });
});

console.log("at reach")

这是错误的代码：

$( ".selected" ).each(function(index, el) {
    el.on("click", function(){

    });
});

console.log("out of reach")

Answer 1

  

  
1. 为什么我不能使用el添加事件并成为听众。
  

您无法使用jQuery el方法将点击事件附加到DOM元素on()，您可以使用$()转换元素：

$(el).on("click", function(){
    //Your logic
});

  

  
1. 如果我使用el，则整个代码块停止运行并且似乎卡在每个循环中。
  

那是因为你试图在DOM元素上调用jQuery方法，所以通常你会得到：

  

未捕获的TypeError：el.on不是函数

建议的解决方案：

但是你不需要循环，你可以使用以下命令将click事件附加到具有给定选择器的所有元素：

$( ".selected" ).on("click", function(){
      //Your logic here
});

希望这有帮助。

Answer 2

如果你看一下jQuery中的documentation for each，就会显示

  

功能

     

类型：函数（整数索引，元素元素）

     

为每个匹配元素执行的函数。

如果你查找Element in jQuery

  

文档对象模型（DOM）中的元素

因此，您将DOM元素视为jQuery对象。您需要将它包装在jQuery中，将其转换为jQuery对象，就像使用this

一样

$( ".selected" ).each(function(index, el) {
  $(el).on("click", function(){

  });
});

那么为什么控制台日志行显示出来？因为当您尝试在没有on方法的元素上调用on（）方法时，浏览器会遇到并出错。您的开发者控制台应该出现错误VM279:2 Uncaught TypeError: el.on is not a function