CODEWITHSUNDEEP
javascriptjqueryarraysfunctioneval
chepukha
chepukha

Reputation: 2489

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 each 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

Upvotes: 1

Views: 2565

Answers (3)

user113716
user113716

Reputation: 322502

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/

Upvotes: 1

FishBasketGordo
FishBasketGordo

Reputation: 23142

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);

Upvotes: 1

Magnar
Magnar

Reputation: 28810

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);
    }
});

Upvotes: 3

Related Questions