Functional link instead of function body - in a loop (with argument)

Question

I would like to replace this:

for( var i=0; i<elementArray.length; i++ ) elementArray[i].click(function(){ console.log("element clicked - selectedElementIndex = " + i); }); 

with something like:

 for( var i=0; i<elementArray.length; i++ ) elementArray[i].click( onElementClick(i) ); function onElementClick( i ){ console.log("element clicked - selectedElementIndex = " + i ); } 

How can i do this?:)

Answer 1

Since (as far as I know) the click handler cannot accept arguments, you need to make a function with a variable in the scope, which should look something like this:

 for( ... ) { elementArray[i].click( onElementClick(i) ); ... } function onElementClick( id ){ return function() { console.log("element clicked - selectedElementIndex = " + id ); } } 

Answer 2

Replace:

 elementArray[i].click( onElementClick(i) ); 

WITH

 elementArray[i].click( onElementClick(elementArray[i].id)); 

Answer 3

Wrap it in a function expression:

 elementArray[i].click(function() { onElementClick(i); }); 

You also need to wrap the code in a function expression to avoid sticky issues:

 (function() { ... for ( ... ) (function(i) { elementArray[i].click(function() { onElementClick(i); }); })(i); })(); 

Answer 4

Using data , it might look like this:

 for (... { elementArray[i].click( onElementClick ).data('id',i); } function onElementClick(){ console.log("element clicked - selectedElementIndex = " + $(this).data('id') ); }