javascript - 创建新的 HTML 元素时 Javascript 函数不起作用

Question

我的 HTML：

<table id="laboral">
    <tr>
        <td><input type="text" name="start"/></td>
        <td><input type="text" name="end"/></td>
        <td><textarea name="desc"></textarea></td>
        <td><button type="button" onclick="saveRow(this);"> + </button></td>
    </tr>
</table>

当我按下+按钮时，我创建了一个与第一行完全相同的新行，但该onclick事件不起作用：

这是保存值并创建 2input和 的代码textarea：

var button = document.createElement("button");
button.type = "button";
button.setAttribute("onclick", "saveRow(this);")
button.innerHTML = "+";
var btn = tr.insertCell(3);
btn.appendChild(button);    

如果我使用 Firefox 检查结果，我可以看到第一个按钮和新生成的按钮具有相同的代码。但是生成的不起作用。

Answer 1

与其为您可能添加的所有按钮定义事件处理程序，不如将其推迟到表格中可能更有效。在这种情况下，你会这样做：

// this script should be placed after the table on the page, or deferred in some way
document.getElementById('laboral').onclick = function(e) {
    e = e || window.event;
    var elem = e.srcElement || e.target;
    if( !elem.tagName) elem = elem.parentNode;
    if( elem.tagName == "BUTTON") {
        var tr = elem;
        // find the row that contains the button
        while(tr.tagName != "TR") tr = tr.parentNode;
        tr.parentNode.insertBefore(tr.cloneNode(true),tr.nextSibling);
    }
};

完成了^_^