jQuery clone()在输入字段中保留用户数据

时间:2013-11-05 21:21:23

标签: javascript jquery

参见jsfiddle:http://jsfiddle.net/bjCz3/

HTML

<table> <tr class="copyMe"> <td><input type="text" name="test" /></td> </tr> </table> <a id="clickMe" href="#">Click Me</a>

jquery的

  $('#clickMe').click(function(event){
   event.preventDefault();

   var tr = $('.copyMe:last');
   var newTr = tr.clone();
   newTr.appendTo(tr.parent());
  }); 

如果您在输入中键入文本,然后单击单击我,则会克隆并插入行(包括输入),并包含您输入的数据。

clone()的API说:

  

.clone()方法执行匹配集的深层副本   元素,意味着它复制匹配的元素以及所有元素   他们的后代元素和文本节点。出于性能原因,   表单元素的动态状态(例如,输入到输入的用户数据,以及textarea或对选择的用户选择)不会被复制   克隆元素。克隆操作将这些字段设置为   它们在HTML中指定的默认值。

http://api.jquery.com/clone/

那么为什么我的输入值已填入,更重要的是,我该如何预防呢?我希望它们是空的/默认的,就像文档所暗示的那样。我尝试将两个参数都指定为false,即使它们默认为那个,它仍然会复制它。

3 个答案:

答案 0 :(得分:4)

如果您正在使用未检查的输入或在页面加载时设置了值。 (或者你想要设置的默认值)...在用户触摸一行之前缓存一行。然后克隆存储的行以在需要时追加

/* store row on page load*/
 var tr = $('.copyMe:last').clone();
 $('#clickMe').click(function(event){
   event.preventDefault();

  var newTr = tr.clone();....

})

答案 1 :(得分:2)

在jquery填写错误报告后自己动手:

  $('#clickMe').click(function(event){
   event.preventDefault();
   var tr = $('.copyMe:last');
   var newTr = tr.clone();
   newTr.find(":input").val(''); //find all input types (input, textarea), empty it.
   newTr.appendTo(tr.parent());
  }); 

更新了工作小提琴:http://jsfiddle.net/bjCz3/2/

答案 2 :(得分:2)

至于自己清除它的方法。

$('#clickMe').click(function(event){
  event.preventDefault();
  var tr = $('.copyMe:last');
  var newTr = tr.clone();
  newTr.find('input').val('');
  newTr.appendTo(tr.parent());
});   

<强>更新

newTr.find("input[type=text], textarea").val("");
newTr.find('input:checkbox').removeAttr('checked');

http://jsfiddle.net/bjCz3/3/