jQuery中.each循环内element绑定.click失效原因咨询

嘿，这个问题问得特别好，刚好能帮你搞清楚原生DOM元素和jQuery对象的核心差异！咱们一步步拆解：

问题出在element的身份上 #

先看你第一段不生效的代码：

$('a').each( function(index, element) { element.click(function(){ console.log('hit'); }); });

这里的element是原生的DOM锚点元素（也就是浏览器原生API里的HTMLAnchorElement对象），它的click()方法和jQuery对象的click()完全不是一回事：

• 原生DOM的click()方法是用来立即触发元素的点击行为的，它不需要接收函数参数，你传进去的回调会被直接忽略，自然没法完成事件绑定。
• 如果要给原生DOM元素绑定点击事件，你得用原生API：element.addEventListener('click', function(){ console.log('hit'); })，或者老派的element.onclick = function(){...}。

为什么$(this)能正常工作？ #

再看你第二段可行的代码：

$('a').each( function() { $(this).click(function(){ console.log('hit'); }); });

这里的$(this)把原生DOM元素包装成了jQuery对象，jQuery给这个对象封装了自己的click()方法——这个方法的作用就是绑定点击事件处理器，它内部帮你做了浏览器兼容性处理（比如自动适配addEventListener或者旧IE的attachEvent），所以调用它就能正确给元素绑定点击回调了。

额外补充：你说的最优解为啥更高效？ #

你提到的$('a').click(function(){ console.log('hit'); });确实是最优方案，因为jQuery的事件绑定方法（比如click、on）本身就会自动遍历所有匹配的DOM元素，不需要你手动调用each，这是jQuery提供的语法糖，能帮你少写冗余代码。

内容的提问来源于stack exchange，提问作者pmareke