javascript - 在运行时 HTML 元素上调用单击事件处理程序

Question

我有一个 HTML 文件，当用户在表格单元格内单击时，我将在其中创建一个文本区域。基本上，它是一个使用表格创建的数据网格，当用户单击一个数据网格时，它会删除单元格中的文本并将其替换为文本区域。下面是我在表的 onClick 处理程序中使用的代码。

summaryTableElement.innerHTML = "<textarea id='summaryTextBox' value='TestString' onclick='doNothing(this.id)'> </textarea> <input type='button' onclick='saveSummary()' value='Save' /> "         

这一切工作正常，并且它完美地创建了一个文本区域。当用户单击文本区域修改数据时，它会出错。在这种情况下，文本区域的单击事件处理程序永远不会触发。相反，表格接收单击事件，从而创建另一个文本区域。无论用户做什么，文本区域都不会收到任何事件。

现在，我很困惑在这里做什么。

编辑:

我又查了一下。事实证明，它正在触发 child 的点击事件处理程序。但是，事件也传播到父元素。

编辑:

我尝试在父级的点击事件处理程序中添加以下条件

if (id.toString() == "SummaryData")

但这即使对于子元素也会返回 true。

Answer 1

使用一个标志来指示单击一次。如果已单击它，则不要运行该函数。现在是文本区域的问题。在动态创建的 html 代码中，添加一个 onfocus 事件处理程序而不是 onclick。此外，您动态添加的所有文本区域的“id”不能相同。使用类似 "id='xyz"+i+"'" 的内容，其中 'i' 表示计数，即添加的文本区域的数量。