仿型事業部總是複製

Question

爲了更好地理解我的問題，看看代碼訪問FIDDLE：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> 

無休止的重複是好的，問題是，當你去鍵入另一個項目爲形式，將複製表。我需要它，以便複製表格的唯一方法是通過單擊加號圖標。

爲了更好地理解我的問題，看看代碼訪問FIDDLE：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.