Question

更好地了解我的问题，并查看代码访问的问题：http://jsfiddle.net/dnyXC/

我有一个脚本（下面），允许您单击一个图标，它复制表格，允许在包含的表单上提供更多输入。这个问题是，一旦你点击图标一次复制它，你在桌面上点击的任何地方，无论位置如何重复表格。

document.getElementById('line-duplicate').onclick = duplicate;
    var i = 0;

        function duplicate() {
            var original = document.getElementById('item-table' + i);
            var clone = original.cloneNode(true); // "deep" clone
            clone.id = "item-table" + ++i; // there can only be one element with an ID
            clone.onclick = duplicate; // event handlers are not cloned
            original.parentNode.appendChild(clone);
        }

这是表格的html：

<table class="table" id="item-table0">
<tr>
    <td>Item Name</td>
    <td>Qty/Hrs</td>
    <td>Rate</td>
    <td>Tax Rate</td>
    <td>Type</td>
    <td>Cost</td>
    <td>Actions</td>
</tr>
<tr>
    <td>
        <input class="input-medium" type="text" name="" />
    </td>
    <td>
        <input class="input-mini" type="text" name="" placeholder="1" />
    </td>
    <td>
        <input class="input-mini" type="text" name="" placeholder="0.00" />
    </td>
    <td></td>
    <td>
        <select class="input-small" name="">
            <option>Standard</option>
            <option>Expense</option>
        </select>
    </td>
    <td>$0.00</td>
    <td><i class="icon-plus" style="cursor:pointer;" id="line-duplicate"></i>  <i class="icon-trash pull-right"></i>
        </a>
    </td>
</tr>

无休止的复制很好，问题是当你在表单中输入另一个项目时，你复制了表格。我需要它，以便复制表的唯一方法是单击加号图标。

更好地了解我的问题，并查看代码访问的问题：http://jsfiddle.net/dnyXC/

Answer 1

问题是您将整个重复行的onclick绑定到duplicate()函数。

你应该让line-duplicate成为一个类（具有相同ID的多个元素是一件坏事），并在函数内部和外部使用document.getElementsByClassName('line-duplicate')将重复函数绑定到每个元素类名，如下：

document.getElementsByClassName('line-duplicate')[0].onclick = duplicate;

var i = 0;

function duplicate() {
    var original = document.getElementById('item-table' + i);
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "item-table" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
    var listOfLineDuplicateItems = document.getElementsByClassName('line-duplicate'); // this must be after the table has been appended to the DOM
    for (var j = 0; j < listOfLineDuplicateItems.length; ++j) {
        listOfLineDuplicateItems[i].onclick = duplicate;
    }
}

Here's a JSFiddle.

复制Div总是重复

1 个答案: