配列内の各オブジェクトに関数をバインドする方法は？

Question

質問のタイトルは、実際にはっきりしないかもしれないし、不正確かもしれません。しかし、これは私がしたいことです。

オブジェクトの配列が必要です。各オブジェクトはボタンになります。あらかじめ定義された機能を各ボタンにバインドしたい。コードのサンプルはhereです。

現在、私はeval（）を使用していますが、遅くてセキュリティ上の理由から悪い習慣と考えられます。 eval（）関数がすぐに実行され、宣言されている2つの関数が呼び出されるため、どちらも機能しません。

誰かが自分の目標を達成するための最良のアプローチを教えてください。

ありがとうございました

Answer 1

関数を配列に保存してください。 FishBasketGordoは機能を格納について言った基本的http://jsfiddle.net/tAZvz/2/

、だけでなく、あなたはjQueryのclick機能を使用する必要があります。ここにあなたのためにそれを修正

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

Answer 2

：

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

は、その後、クリックイベントハンドラを設定しますイベントをバインドするには、onclickに割り当てられません。これは、ラップされた要素なのでです。

---

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

Answer 3

あなたはかなりこのようなあなたのコードを短縮することができます：私はあなたのアレイを反復するためにjQuery.each()^[docs]メソッドを使用http://jsfiddle.net/yLPsK/

：

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

例。

は、その後、私はあなたが作成したオブジェクトと空のオブジェクト（clickからfuncの変更）だけでなく、type:"button"情報と別のものを拡張するためにjQuery.extend()^[docs]方法を使用し、jQuery()^[docs]メソッドの2番目の引数として結果を渡されました。

アレイ内の各オブジェクトにtype:"button"を追加すると、$.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'); 
    }); 
}); 

例：配列は非常に巨大で、読みにくくなりますhttp://jsfiddle.net/yLPsK/1/