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)); 

您可能还想清除值并更新字段名称。

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