JavaScript 克隆节点 : SELECT keeping some undesirable binding

Question

因此，我有一个包含输入元素的简单表格，我需要向其中动态添加新行。

其中一个单元格包含一个 SELECT 元素和一个选项列表，这些选项通过 cloneNode() 进行复制。

问题是:当我更改任何复制的 SELECT 元素时，原始 SELECT 的索引也会更改为相同的值，就像克隆过程留下某种“绑定(bind)”一样。

我的 table 看起来像这样:

<table>
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td>
            <select>
                <option>Options</option>
            </select>
        </td>
    </tr>
</table>

克隆例程相对复杂，因为我必须更改单元 ID、元素名称和其他内容，但它可以归结为如下内容:

var table = document.querySelector('#table');
var rows = table.querySelectorAll('tr');

for (var x = 0; x < 5; x++)
{

    row = rows[1].cloneNode(true);

    // Changes everything that needs to be changed

    table.appendChild(row);

}

有人知道什么可能导致原始 SELECT 被“绑定(bind)”到复制的 SELECT 吗？

提前致谢!

Answer 1

谢谢大家的评论!事实证明这是一个简单的错误:我通过 addEventListener() 将一个事件添加到节点，该事件正在触发并将原始 SELECT 更新为复制事件的相同索引。