Question

我遇到了一个非常奇怪的问题，我有一个解决方法，但实际上并不知道它为什么会发生。

本质上，我采用一个现有的DOM元素，使用innerHTML来创建追加DOM元素，然后为它的onclick事件放入一个事件处理程序。

for(i=0; i<contextMenuModel.length; i++) {
    contextMenuRow = contextMenuModel[i];
    currentRowId = "edit_context_table_row_" + i;

    editTable.innerHTML += "<div id='" + currentRowId + "'></div>";
    row = dojo.byId(currentRowId);

    row.innerHTML += "<span>" + contextMenuRow.labelName + "</span>";
    row.innerHTML += "<span>" + contextMenuRow.eventName + "</span>";

    dojo.connect(row, "onclick", row, rowClickHandler);
}

问题是：只有最后一行以onclick处理程序结束。其他人没有。无论我在哪个浏览器都没关系，如果我将dojo.connect更改为

并不重要

row.onclick = rowClickHandler;

另外，如果我拿出：

row.innerHTML += "<span>" + contextMenuRow.eventName + "</span>";

它仍然不起作用。

然而，我找到的解决方法（这使得情况更好）是这样的：

for(i=0; i<contextMenuModel.length; i++) {
    contextMenuRow = contextMenuModel[i];
    currentRowId = "edit_context_table_row_" + i;

    editTable.innerHTML += "<div id='" + currentRowId + "'></div>";
    row = dojo.byId(currentRowId);

    row.innerHTML += "<span>" + contextMenuRow.labelName + "</span>";
    row.innerHTML += "<span>" + contextMenuRow.eventName + "</span>";
}

for(i=0; i<contextMenuModel.length; i++) {
    row = dojo.byId("edit_context_table_row_" + i);
    dojo.connect(row, "onclick", row, rowClickHandler);
}

这么奇怪的问题。

Answer 1

我发现在动态创建元素并将事件附加到它们时，我通常会使用document.createElement更好。这可以确保您的元素被添加到dom中，并且您有一个对象可以使用而不是连接字符串。

   var divRow = document.createElement("DIV");
   divRow.id = currentRowId;
   divRow.onclick = function(){};
   editTable.appendChild(divRow);

Answer 2

所以这就是问题所在。当我这样做时：

editTable.innerHTML += "<div id='" + currentRowId + "'></div>";

我正在连接，然后替换旧的innerHTML。这意味着生成了一个新的DOM节点;这个新的DOM节点没有连接到旧的事件处理程序。这会留下旧的事件处理程序，什么都不做。更不用说代码正在创建并丢弃所以许多DOM节点，这段代码非常糟糕。

对于使用InnerHTML和事件处理程序创建DOM元素的循环不起作用

2 个答案: