Question

我设置了产品页面，用户可以在其中填写字段以自定义产品（尺寸，数量，颜色等）。我还有一个按钮，他们可以添加另一个产品，并在下面显示与以前相同的字段。但是，我想要一个按钮，他们可以复制刚刚输入到字段中的内容，因此不会添加新的字段集，而是复制刚刚输入的字段。

https://jsfiddle.net/y0y7r3za/12/这是代码的基础知识（由于某些原因无法发布实际代码）。

$(document).ready(function() {
    $('#duplicate').click(function(e) {
        e.preventDefault();
        $("#product").clone().appendTo("#newArea");
    });
});

（允许jsfiddle链接的代码示例）。克隆工作和复制，但是一旦我按下更新按钮以保存＆＃39;更改，并返回到编辑它的顺序，克隆的形式不再存在。

关于克隆消失原因的任何想法都会有很大的帮助！

Answer 1

＆＃13;

$(document).ready(function() {
 	function cloningElement(el){
  	var source = el.closest(".clone-source").clone();
      source.removeClass('clone-source hide').addClass('cloned');
      source.appendTo("#newArea");
  }
  
  
  $(document).on('click', 'button[id="duplicate"]', function(e) {
  		e.preventDefault();
			cloningElement($(this));
  });
  
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone-source" id="product">
<form action="/action_page.php">
  <fieldset>
    <legend>Product information:</legend>
    Name:<br>
    <input type="text" name="name">
    <br>
   Size :<br>
    <input type="text" name="size">
    <br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
 <button type="button" id="duplicate">Duplicate</button> 
</div>
<div id="newArea">
 </div>

＆＃13;

JQuery克隆产品领域

1 个答案: