How to bind function to each object in an array?

The question title may not be really clear or even inaccurate. However, this is what I want to do.

I want to have an array of objects. Each object will be a button. I want to bind predefined function to e开发者_如何学Goach button. A sample of the code is here.

Currently, I'm using eval() but I know it's slow and and is considered a bad practice due to security reason. And it doesn't work either because the eval() function will execute right away and call the 2 functions that have been declared.

Can someone please suggest me what's the best approach to achieve my goal?

Thanks

Fixed it for you here: http://jsfiddle.net/tAZvz/2/

Basically what FishBasketGordo said about storing the functions, but also you have to use jQuery's click function to bind the events, not assign to onclick, since they are wrapped elements.

var func1 = function() { alert("Function 1 is called");}
var func2 = function() { alert("Function 2 is called");}

var myArray = [{id:"bt1", value:"+", func: func1},
               {id:"bt2", value:"-", func: func2}];


$(function(){
    for(var i=0;i<myArray.length;i++){
       var button = $('<input type="button">');
       button.attr('id',myArray[i].id).attr('value',myArray[i].value);

       button.click(myArray[i].func);

       $('#test').append(button);
    }
});

Just store the function in the array.

var myArray = [{id:"bt1", value:"+", func: func1 },
               {id:"bt2", value:"-", func: func2 }];

Then set the click event handler:

button.click(myArray[i].func);

You can shorten your code quite a bit like this:

var func1 = function() { alert("Function 1 is called");}
var func2 = function() { alert("Function 2 is called");}

    // changed property name ----------v
var myArray = [{id:"bt1", value:"+", click: func1},
               {id:"bt2", value:"-", click: func2}];

$(function(){
    $.each( myArray, function(i,v) {
       $('<input>',$.extend({},v,{type:"button"})).appendTo('#test');
    });
});

Example: http://jsfiddle.net/yLPsK/

I used the jQuery.each()^[docs] method to iterate your Array.

Then I used the jQuery.extend()^[docs] method to extend an empty object with the objects you created (changing func to click), as well as another one with the type:"button" info, and passed the result as the second argument to the jQuery()^[docs] method.

If you add type:"button" to each object in your array, you can get rid of $.extend.

var func1 = function() { alert("Function 1 is called");}
var func2 = function() { alert("Function 2 is called");}

    // changed property name ----------v
var myArray = [{id:"bt1", value:"+", click: func1, type:"button"},
               {id:"bt2", value:"-", click: func2, type:"button"}];
    // added the "type" property -------------------^

$(function(){
    $.each( myArray, function(i,v) {
       $('<input>', v).appendTo('#test');
    });
});

Example: http://jsfiddle.net/yLPsK/1/