jQuery를 사용하여 사용자 정의 이벤트를 동적으로 추가하는 방법은 무엇입니까?

Question

콘텐츠가 json 파일에서 동적으로로드되는 시스템을 만들고 있습니다. json 파일은 jQuery에 의해 생성 된 내용을 설명합니다. 동적으로 이벤트를 추가하려고합니다. 그것은 작동하지만 두 개 이상의 새로운 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);   
} 

후, 무슨 일하는 두 버튼이 같이 "취소"이벤트를 얻을 수 있다는 것입니다 삽입 할 경우의 일련의 객체 및 수 마지막으로 추가 된 것이 었습니다 ...이 '엘'변수가 올바른 DOM 요소를 가리 키도록하려면 어떻게해야합니까?

Answer 1

el 변수는 단일 폐쇄의 모든 이벤트 처리기에서 공유됩니다.

이벤트 처리기를 연결하고 변수를 매개 변수로 사용하는 별도의 메서드를 만들어야합니다.
함수를 호출 할 때마다 별도의 변수 복사본이있는 이벤트 핸들러에 대해 별도의 클로저가 만들어집니다.