.each + .click (jQuery)

Question

如果我尝试运行此代码：

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

它不起作用，但是如果我编写这个代码：

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

一切都好，有人可以帮我吗？为什么当我使用元素时不起作用

PD：我知道这个解决方案是最好的，但我想知道为什么以前不起作用

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

Answer 1

它应该$(element).click(...，因为element是一个DOM元素，而不是jQuery对象。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a>foo</a>
<p><a>bar</a>
<p><a>baz</a>

实际上，本机元素上有一个click方法，但它有不同的用途;它调用"click"事件而不是绑定处理程序。

---

当然，要在没有大型依赖项的情况下执行此操作，并使用现代语法，它可能看起来像这样：

for (const element of document.querySelectorAll('a')) {         
element.addEventListener("click", handler)
}
function handler() {
console.log('hit');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a>foo</a></p>
<p><a>bar</a></p>
<p><a>baz</a></p>

Answer 2

您可以使用addEventListener

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