JQuery нажмите событие срабатывает в 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 

Вы можете напрямую связать с набором элементов, без необходимости использования каждого, хотя это не является причиной.