2016-10-21 72 views
1

,我有以下道场的JavaScript代码段:Dojo事件动态创建的事件没有处理

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()方法中发生的所有行逻辑。 HTMl是按照预期构建的,你可以在下面的截图中看到:ButtonTable

问题是,每次我添加一个按钮,只有最后一个按钮的事件侦听器工作,即在屏幕截图的情况下,红色日志:Hello there, you called the remove handler [object MouseEvent],并且表格中的上一个按钮不再可以被点击并捕获必要的事件。对不起,如果代码是我的目标的简化,我很欣赏任何提供的帮助。

*********编辑**************

所以我采取了不同的方法,并置于只有1个按键总,并删除逐级从下往上。只要它位于<table>以外,它的功能就是......它带给我的结论是不要在表格中插入跳转或按钮经过许多小时的迷失,我会建议你是否绝对需要一张桌子,根据需要将按钮放置在桌子旁边使用CSS and floats 我会将此问题视为未答复,直到有人能够提供内部表格方法不起作用的解释为止。

+1

这个问题似乎没有在上面分享的代码。我的猜测是,添加行时出现了一些问题。你在创建行时使用'innerHTML'吗? –

+0

不,每个单独的行都有三个​​元素和(反映文本)以及另一个​​按钮放置到哪里。这里是[JS小提琴](https://jsfiddle.net/cahzxg1o/),其中一行是HTML生成的表格中的一行,还有一些是用来查看它是如何完成的。你是否看到任何明显的问题? – Rice

+0

JS小提琴不包含任何JavaScript代码。 –

回答

1

与dojo一起工作时。您绝对不应该使用node.innerHTML来添加或更新节点。它基本上将所有的dijits转换为HTML字符串,并由浏览器解析为常规HTML。这反过来将破坏与它相关的dom对象和事件。

取而代之,使用dojo/dom-construct创建dom对象,并在DOM节点上添加appendChild或在容器dijits的情况下添加addChild

+0

在我的情况下,Dijit节点(按钮)被添加到表中,通过表的'innerHTML'属性的附加操作创建行,导致按钮的事件侦听器被销毁,正如T Kambi解释的aboved! – Rice

相关问题