jQuery Event Handler created in loop

by

This is a very common issue people encounter.

JavaScript doesn’t have block scope, just function scope. So each function you create in the loop is being created in the same variable environment, and as such they’re all referencing the same i variable.

To scope a variable in a new variable environment, you need to invoke a function that has a variable (or function parameter) that references the value you want to retain.

In the code below, we reference it with the function parameter j.

   // Invoke generate_handler() during the loop. It will return a function that
   //                                          has access to its vars/params. 
function generate_handler( j ) {
    return function(event) { 
        switchBanners(j, true);
    };
}
for(var i = 1; i <= totalBanners; i++){
   $('#slider-' + i).click( generate_handler( i ) );
}

Here we invoked the generate_handler() function, passed in i, and had generate_handler() return a function that references the local variable (named j in the function, though you could name it i as well).

The variable environment of the returned function will exist as long as the function exists, so it will continue to have reference to any variables that existed in the environment when/where it was created.

UPDATE: Added var before i to be sure it is declared properly.

More Related Contents:

  1. Regular Expression jquery validation1 [duplicate]
  2. Can’t append element
  3. Convert array to JSON
  4. How do I chain three asynchronous calls using jQuery promises?
  5. CORS – How do ‘preflight’ an httprequest?
  6. How to change value of object which is inside an array using JavaScript or jQuery?
  7. Prevent Page Load on Jquery Form Submit with None Display Button
  8. JavaScript eyedropper (tell color of pixel under mouse cursor)
  9. How do I print part of a rendered HTML page in JavaScript?
  10. Verify External Script Is Loaded
  11. How to add/subtract dates with JavaScript?
  12. Benefits of loading JS at the bottom as opposed to the top of the document
  13. Parsing URL hash/fragment identifier with JavaScript
  14. keyCode values for numeric keypad?
  15. How to get the exact local time of client?
  16. JS – get image width and height from the base64 code
  17. jQuery – How to select by attribute
  18. jQuery on ‘double click’ event (dblclick for mobile)
  19. Best way to convert string to array of object in javascript?
  20. What is the best way to detect retina support on a device using JavaScript?
  21. Bootstrap Carousel : Remove auto slide
  22. Export HTML table to CSV using vanilla javascript
  23. Inserting arbitrary HTML into a DocumentFragment
  24. how to resolve iframe cross domain issue [duplicate]
  25. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  26. Uncaught ReferenceError: $ is not defined error in jQuery
  27. How can I stop jQuery.ajax() from logging failures to the console?
  28. Call angularjs function using jquery/javascript
  29. Does the attr() in jQuery force lowercase?
  30. Is it possible to wait until all javascript files are loaded before executing javascript code?

Leave a Comment