도장 이벤트 동적으로 생성 된 이벤트가

Question

을 처리하지 나는 다음과 같은 도장 자바 스크립트 코드 조각이 :

postCreate: function() { 
    this.inherited(arguments); 
    var hitchWidgetToaddLevelButtonClickHandler = DojoBaseLang.hitch(this, addLevelButtonClickHandler); 
    DojoOn(this.AddLevelButton, "click", hitchWidgetToaddLevelButtonClickHandler); 

    function addLevelButtonClickHandler() { 
       hierarchyLevelNumber += 1; 
       var myButton = new Button({ 
        label: "Click me!", 
        id: "level_button_" + hierarchyLevelNumber, 
        onClick: function(){ 
         // Do something: 
         console.log("Hello there, "); 
        } 
       }).placeAt(someNode,"last").startup(); 

        var registeredRemovalButton = DijitRegistry.byId(("level_button_" + hierarchyLevelNumber)); 
        DojoOn(registeredRemovalButton, "click", function someFunction() { 
         console.log("how are you?"); 
        }); 
    } 
} 

다음과 같은 HTML을 AddLevelButton가 클릭

<div id="settingsBorderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false, region:'top'" class="${theme}"> 

    <table data-dojo-attach-point="HierarchyLevelsTable"> 
     <tr> 
      <th>Level</th> 
      <th> Table Name </th> 
      <th> Column Name</th> 
     </tr> 
     <td id="someNode"> 
     </td> 
    </table> 
</div> 

여기에 목표는 동적으로 행을 생성 테이블에 필요한 정보와 각 행에 대한 새로운 버튼이 있습니다. 내 문제를 설명하기 위해 HTML과 Javascript가 크게 단순화되어 있습니다. 나는 addLevelButtonClickHandler() 방법에서 발생하는 모든 행 논리를 포함하지 않았다. HTMl은 다음 스크린 샷에서 볼 수 있듯이 의도 한대로 제작되었습니다.

문제는 버튼을 추가 할 때마다 마지막 버튼의 이벤트 리스너 만 작동한다는 것입니다. 즉, 스크린 샷의 경우에는 버튼이 원으로 그려져 있습니다. 빨간색 로그 : Hello there, you called the remove handler [object MouseEvent], 그리고 테이블의 이전 버튼을 더 이상 클릭하고 필요한 이벤트를 잡을 수 없습니다. 코드가 내 목표를 총체적으로 간소화 한 경우 죄송합니다. 제공되는 도움에 감사드립니다.

********* EDIT **************

그래서 나는 다른 접근을했다 만 1 명 버튼의 총을 배치하고, 수준별 수준을 삭제 아래에서 위로. 그것이 <table>의 외부에있는 한, 그것은 기능을합니다. 의 결론에 이르게합니다. 많은 시간이 지났을 때, 처음에는 테이블이 절대적으로 필요하다면 추천 할 것입니다. 필요에 따라 테이블 옆에 단추를 놓으십시오. CSS and floats 내부 테이블 접근 방식이 작동하지 않는 이유에 대한 설명을 다른 사람이 제공 할 때까지이 질문을 대답하지 않은 채로 두겠습니다.

Answer 1

도장 작업 중. 노드를 추가하거나 업데이트하는 데는 node.innerHTML을 절대로 사용하지 않아야합니다. 기본적으로 모든 dijits를 HTML 문자열로 변환하고 브라우저에서 일반 HTML로 구문 분석합니다. 차례 차례로 그것과 관련된 DOM 객체와 이벤트를 파괴합니다.

대신 dojo/dom-construct을 사용하여 DOM 객체를 만들고 DOM 노드의 경우 appendChild 또는 컨테이너 dijits의 경우 addChild으로 추가하십시오.