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/