克隆jQuery时丢失输入值

时间:2014-01-30 13:42:38

标签: javascript jquery clone

当我尝试使用值输入克隆表行时,它会复制但输入松散值。如何使用值克隆表行。

Example online

    <table class="table table-bordered table-striped">
      <tr>
        <th>Service</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>&nbsp;</th>
      </tr>

  <tr class="tr_clone">
    <td><input type="text" ></td>
    <td><span class="controls">
      <input value="100000" class="placeholder span2 datepicker" type="text" value="" data-date-format="yyyy-mm-dd">
      </span></td>
    <td><span class="controls">
      <input class="placeholder span2 datepicker" type="text" value="" data-date-format="yyyy-mm-dd">
      </span></td>
    <td>&nbsp;</td>
  </tr>
</table>
<p><a href="#" class="tr_clone_add">Clone</a></p>

$(function(){
$(".tr_clone_add").live('click', function() {
    var $tr    = $('table').find('.tr_clone').first();
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});
});

2 个答案:

答案 0 :(得分:1)

通过将 clone() 的参数指定为true来执行深层复制。这将使用数据和任何事件绑定完整地克隆元素。

var $clone = $tr.clone(true);

当然,请删除您要将所有文字输入重置为''

的行

答案 1 :(得分:0)

您需要删除$clone.find(':text').val('');。使用:

$(function(){
 $(".tr_clone_add").live('click', function() {
var $tr    = $('table').find('.tr_clone').first();
var $clone = $tr.clone();
$tr.after($clone);
});
});

<强> Working Fiddle