jQueryでカスタムイベントを動的に追加するには？

Question

私は、コンテンツがjsonファイルから動的にロードされるシステムを作成しています。 jsonファイルは、jQueryによって作成されるコンテンツを記述します。イベントを動的に追加しようとしています。それは動作していますが、2つ以上の新しいDOM要素にイベントを追加しようとすると、最後に追加されたイベントがすべて取得されます。私は、JSONコンテンツの一部の例は以下のようになり

私は私の新しいDOMイベントに参照すると間違って何かをやっていると思いますが、何を把握することはできません...

：

{ 
    "container" : { 
    "id" : "container", 
    "dom_type" : "<div>", 
    "attr" : { 
     "class" : "container", 
     "id" : "container" 
    }, 
    "children" : { 
     "input_submit" : { 
     "dom_type" : "<button>", 
     "html" : "Submit", 
     "attr" : { 
      "type" : "submit", 
      "id" : "submit", 
      "class" : "submit" 
      }, 
     "event": { 
      "type": "submit", 
      "name": "submitevent" 
      } 
      }, 
     "input_cancel" : { 
     "dom_type" : "<button>", 
     "html" : "Cancel", 
     "attr" : { 
      "type" : "submit", 
      "id" : "cancel", 
      "class" : "submit" 
      }, 
     "event": { 
      "type": "submit", 
      "name": "cancelevent" 
      } 
      } 
     } 
     } 

さて、私の関数は読み込み、 JSONファイルは、jqueryのは/が、その後の文は、私はいくつかのDOMを作成し、それが

// here, json is a javascript object made by jQuery with getJson.. 
function makeDom (json, dom_container) { 
    for (var child in json.children) 
     { 
      var tp = json.children[child]; 

      // make dom element and add id (id is required) 
      if (!tp['attr']) 
      { 

       $.error('jquery.myplugin.loadscreen() - erreur: Required child object "attr" not found in ' + child + '.') 
      } 

      if (undefined == tp['attr']['id']) 
      { 

       $.error('jquery.myplugin.loadscreen() - erreur: Required parameter "id" not found in "attr" in ' + child + '.'); 
      } 

// --------------------------------------------------------------- 
// I guess there is something wrong with this 'el' variable, because 
// when I add the event to it, all similar elements get the event 
// ---------------------------------------------------------------- 
    //add ID 
      var el = $(tp['dom_type']); 
      el.attr('id', tp['attr']['id']); 

      // add type if any 
      if (tp['attr']['type']) { 
       el.attr('type', tp['attr']['type']) 
      } 

      // add for if any 
      if (tp['attr']['for']) { 
       el.attr('for', tp['attr']['for']) 
      }; 

    // add class if any 
    if (tp['attr']['class']) { 
     el.addClass(tp['attr']['class']); 
    } 

      // add src if any 
      if (tp['attr']['src']) { 
       el.attr('src', tp['attr']['src']) 
      }; 

      // add href if any 
      if (tp['attr']['href']) { 
       el.attr('href', tp['attr']['href']) 
      }; 

      // add html if any 
      if (tp['html']) { 
       el.html(tp['html']); 
      }; 

     // add value if any 
    if (tp['attr']['value']) { 
     el.attr('value', tp['attr']['value']); 
    }; 

      // add event if any 
      if (tp['event']) { 
       el.bind(tp['event']['type'], function(e){ 
        //do something; 
      });  
    dom_container.append(el);   
} 

そして、何が起こることは両方のボタンはそれとして、「キャンセル」イベントを取得することで挿入した場合、一連のオブジェクトとなります最後に追加されたのは...どのようにして、この 'el'変数を正しいDOM要素を指すようにすることができますか？

Answer 1

el変数は、単一のクロージャ内のすべてのイベントハンドラで共有されます。

イベントハンドラをアタッチし、変数をパラメータとして使用する別個のメソッドを作成する必要があります。
この関数を呼び出すたびに、イベントハンドラの別のクロージャが作成され、変数の別のコピーが作成されます。