函数的范围作为 .click jQuery 选择的变量属性

Question

The script in JavaScript/jQuery :

// Creation of the variables

var foo = [];
foo.functionForClick = function(){ alert('foo'); }

var bar = [];
bar.functionForClick = function(){ alert('bar'); }

// Attribution of the function to the button
var button;

// button foo 
button = foo;
$('#buttonFoo').click(function(){button.functionForClick()});

// button bar, I MUST use the same 'button' variable, 
// it's in the script (it's in a for loop...)  
button = bar;
$('#buttonBar').click(function(){button.functionForClick();});

HTML code

<button id="buttonFoo">
Show Foo
</button>

<button id="buttonBar">
Show Bar
</button>

Why, after execution of the script (which reproduces a more complicated script of a web app I'm coding), the "Show Foo" button alert "bar"?

Any solution?

You can have a look of the problem here:

https://jsfiddle.net/hdye648f/

Answer 1

Yes. button.functionForClick is already a function, so no need to wrap it in the anonymous function. The extra anonymous function is causing button to be resolved when the function executes, rather than when the function is defined.

Instead of

$('#buttonFoo').click(function(){button.functionForClick()});

do

$('#buttonFoo').click(button.functionForClick);