javascript - Dojo Event 动态创建的事件未处理

Question

我有以下 Dojo 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() 中出现的所有行逻辑。方法。 HTMl 是按预期构建的，如以下屏幕截图所示:

问题是，每次我添加按钮时，只有最后一个按钮的事件监听器起作用，即在屏幕截图的情况下，按钮以红色日志圈出:Hello there, you called the remove handler [object MouseEvent] ，并且表中的上一个按钮不再可以单击并捕获必要的事件。抱歉，如果代码完全简化了我的目标，我感谢您提供的任何帮助。

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

所以我采取了不同的做法，总共只放置了1个按钮，并从下往上逐级删除。只要它位于 <table> 之外它起作用了..这使我得出永远不要将数字或按钮放入表格中的结论。在损失了很多时间之后，我建议如果您首先绝对需要一张表格，只需将按钮放在旁边根据需要使用 CSS and floats 到表中 我将不回答这个问题，直到有人能够解释为什么内表方法不起作用。

Answer 1

在与道场合作时。您永远不应该使用node.innerHTML来添加或更新节点。它基本上会将所有 dijit 转换为 HTML 字符串，并由浏览器解析为常规 HTML。这反过来会破坏 dom 对象和与其关联的事件。

而是使用dojo/dom-construct创建dom对象，并使用appendChild(对于DOM节点)或addChild(如果是容器dijit)添加它。