halfacreyum halfacreyum - 1 year ago 58
CSS Question

What would cause click event to fire multiple times?

I have a small todo list I made for practice. Here is a Fiddle
, I cant seem to figure out why the click event that toggle the class that adds and removes the line-through in the todo works on some items, but not others. I checked in the console and for some reason the ones that don't work, when clicked, are firing multiple times. If some one could give me some direction as to why this is happening I would greatly appreciate it.

// Toggle line-through todo
$('.todo-container').on('click', function(){

Answer Source

Like Mike said, you're adding the a new handler to the element again on every keypress, instead use event delegation like this:

$(document).on('keypress', function(e) {
  // Add todo
  if (e.which === 13 && $('.input-field').val() != "") {
    var todo = $('.todo-container');


// Remove todo
$('#todos').on('click', '.todo-container-delete', function() {
  // Toggle line-through todo
$('#todos').on('click', '.todo-container', function() {

$('#todos').on('click', '.todo-container', attaches the listener to the '#todos' element. Then, any time you click inside that element, it checks if the child you clicked had the class "todo-container" and if so, will fire off your code. This is event delegation.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download