道場イベント動的に作成されたイベントは

Question

を扱っていない私は、次の道場のJavaScriptスニペットを持っている：

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

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

AddLevelButtonは、それが動的に行を作成し、クリックされたときに、ここでの目標は、あります必要な情報と各行の新しいボタンが表に表示されます。私の問題を説明するために、HTMLとJavascriptは大幅に簡略化されています。私はaddLevelButtonClickHandler()メソッドで発生する行のロジックをすべて含んでいませんでした。

問題は、ボタンを追加するたびに、最後のボタンのイベントリスナーだけが機能することです。つまり、スクリーンショットの場合はボタンが丸で囲まれています赤いログ：Hello there, you called the remove handler [object MouseEvent]、およびテーブルの前のボタンをクリックして、必要なイベントをキャッチすることはできません。申し訳ありませんが、コードが私の目標を大幅に単純化している場合、私は提供されているすべての助けに感謝します。

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

だから私は別のアプローチを取り、唯一の1ボタンの合計を配置し、レベルによってレベルを削除下から上へ限り、それが<table>の外に存在する限り、それは機能します。の結論に私をもたらします。多くの時間が失われた後、最初にテーブルが絶対に必要な場合は、私はお勧めしますCSS and floats 誰かが内部テーブルのアプローチがうまくいかない理由の説明を提供できるようになるまで、私はこの質問を未回答のままにします。

Answer 1

dojoで作業している間。ノードを追加または更新するのに、node.innerHTMLを使用しないでください。それは基本的にすべてのdijitsをHTML文字列に変換し、ブラウザによって通常のHTMLとして解析します。それは順番にそれに関連付けられたDOMオブジェクトとイベントを破壊します。

代わりにdojo/dom-constructを使用してDOMオブジェクトを作成し、DOMノードの場合はappendChild、コンテナの場合はaddChildを付け加えてください。