JQuery click事件触发了60次

Question

问题是我有一个包含60个元素的页面，它们完全相同：

<div class="imagetd">...</div>
<div class="imagetd">...</div>
....
<div class="imagetd">...</div>
<div class="imagetd">...</div>

他们的活动：

$('.imagetd').each(function(){
   var that = this;
   $(that).on('click', function(){
      console.log('clicked!');
   })
});        

我也试过以下

$(document).on('click', '.imagetd', function(e){
   console.log('clicked!');
});    

当我点击任何元素时，事件会触发60次。你能告诉我为什么？以及如何解决它？

Answer 1

您不需要将每个函数应用于多个项目的事件处理程序。这应该有效：

$('.imagetd').on('click', function(e){
    console.log('clicked!');
}); 

Answer 2

如果您使用的是each，它会根据元素的数量运行，如果您有60个元素，则会运行很长时间。

$(function(){        
     $(document).on('click', '.imagetd', function(e){
         console.log('clicked!');
      });   
 });

Answer 3

$('.imagetd').on('click', function(e){
    e.preventDefault();
    console.log('clicked!');
    $(this).die('click');
}); 

Answer 4

这是fiddle，没有

就能正常工作

$.each

你可以直接绑定到一个元素集合，不需要使用每个元素，虽然它不是原因。