-1

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

本质上，我采用现有的 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);
}

这么奇怪的问题。

4

2 回答 2

1

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

   var divRow = document.createElement("DIV");
   divRow.id = currentRowId;
   divRow.onclick = function(){};
   editTable.appendChild(divRow);
于 2012-07-20T20:07:25.597 回答
0

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

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

我正在连接然后替换旧的 innerHTML。这意味着生成了一个新的 DOM 节点；这个新的 DOM 节点没有连接到旧的事件处理程序。这留下了旧的事件处理程序，什么都不做。且不说这段代码创建和丢弃了这么多 DOM 节点，这段代码真的很糟糕。

于 2012-07-20T19:31:23.457 回答