Assign click handlers in for loop

by

It’s a common mistake to create closures in loops in Javascript. You need to have some sort of callback function like this:

function createCallback( i ){
  return function(){
    alert('you clicked' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( createCallback( i ) );
  }
});

Update June 3, 2016: since this question is still getting some traction and ES6 is getting popular as well, I would suggest a modern solution. If you write ES6, you can use the let keyword, which makes the i variable local to the loop instead of global:

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

It’s shorter and easier to understand.

More Related Contents:

  1. How to get the children of the $(this) selector?
  2. Get selected text from a drop-down list (select box) using jQuery
  3. How can I select an element by name with jQuery?
  4. jQuery selector for inputs with square brackets in the name attribute
  5. var self = this?
  6. Access outside variable in loop from Javascript closure [duplicate]
  7. jQuery selectors on custom data attributes using HTML5
  8. How can I get selector from jQuery object
  9. Select all elements that have a specific CSS, using jQuery
  10. jQuery function to get all unique elements from an array?
  11. jQuery DOM changes not appearing in view source
  12. Testing if a checkbox is checked with jQuery
  13. JQuery .on() method with multiple event handlers to one selector
  14. jQuery : select all element with custom attribute [duplicate]
  15. Selecting multiple classes with jQuery
  16. Case insensitive jQuery attribute selector
  17. How do you check if a selector matches something in jQuery? [duplicate]
  18. Not class selector in jQuery
  19. jQuery single selector vs .find()
  20. Closures in a for loop
  21. Using jQuery to search a string of HTML
  22. jQuery find and replace string
  23. Is there a ‘has focus’ in JavaScript (or jQuery)?
  24. jQuery support “:invalid” selector
  25. Combine two selectors with one jQuery object
  26. closure inside a for loop – callback with loop variable as parameter [duplicate]
  27. jQuery difference between :eq() and :nth-child()
  28. What is the new proper way to use a child selector with a context node in jQuery?
  29. jQuery selector to target any class name (of multiple present) starting with a prefix?
  30. Why do functional pseudos such as :not() and :has() allow quoted arguments?

Leave a Comment