Jquery Mobile：多次添加克隆行

Question

jsfiddle：

我正在創建一個移動表單，允許用戶根據需要添加另一行輸入。

HTML：

<div data-role="collapsible" data-theme="a" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"> 
       <h4>Resident Birthday Cards</h4> 
       <div data-role="fieldcontain"> 
        <table id="bcard_table"> 
         <tr> 
          <th style="width:30%;">DATE</th> 
          <th style="width:40%;">NAME</th> 
          <th style="width:30%;">APT</th> 
         </tr> 
         <tr class="bcard_entry"> 
          <td><input type="date" name="bcards_date[]" /></td> 
          <td><input type="text" name="bcards_name[]" /></td> 
          <td><input type="text" name="bcards_apt[]" /></td> 
         </tr> 
        </table> 
        <p><a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="plus" data-theme="b" id="btnBCard">Add Another</a></p> 
       </div> 
      </div> 

JQUERY：

$(document).on('pagebeforeshow', '#index', function(){  
     $(document).off('click', '#btnBCard').on('click', '#btnBCard',function(e) { 
      $('.bcard_entry').clone().appendTo('#bcard_table'); 
     }); 
    }); 

我看到的問題是什麼 - 因爲我在課堂上bcard_entry cloing一切，它附加一個複製的第一次（但現在有是這個類的兩個）。第二次將克隆現有的行並追加它們等等。

現在我知道問題是什麼，但我不知道如何避免它。

這樣做的正確方法是什麼？

非常感謝任何指導和協助。

Answer 1

您可以在想要克隆的行上使用一個ID，並通過ID引用它（確保刪除克隆副本中的ID）。

或者你可以只克隆第一行。在JS中會是這樣的：

document.getElementById('bcard_table').appendChild(document.querySelector('.bcard_entry').cloneNode(true)); 

您可能還想清除值並更新字段名稱。

或者，您可以使用模板。有一些很好的工具可以使用，比如小鬍子（或者創建自己的）。