Question

在我更具体地询问之前，我必须做出一个假设。每个代码都必须构建在一个html文件中。

所以下面的代码是我实现的，

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

$(document).ready(function(){

$(".clone").click(function(){
$(".cloner").clone().appendTo("#locations");
});

});
</script>
</head>
<body>

<div id="locations" class="tabcontent">
 <div class="cloner">
  <p>This is the paragraph</p>
  <button class="clone">clone</button>
  <div id="cloner2">
   <button class="clone">clone2</button>
   <div>
    <button class="clone">clone3</button>
   </div>
  </div>
 </div>
</div>

</body>
</html>

我想做的事情： 1.）克隆整体进入。 2.）克隆按钮也可以起作用。

如果我点击＆＃34;克隆＆＃34;按钮一开始就会成功克隆整个（克隆2和克隆3也是如此）。

克隆将拥有自己的克隆＆＃34;，＆＃34;克隆2＆＃34;和＆＃34;克隆3＆＃34;纽扣。我希望那些克隆按钮的功能与原始按钮的功能相同，但我编写的方式不能让它们这样做。当原始克隆按钮仍然起作用时，这些克隆按钮不执行任何操作。

您能告诉我如何修复我的代码以使克隆按钮按照我的预期进行操作吗？

我写的时候还有一个额外的问题，

我怎样才能克隆＆＃34;选择＆＃34;要克隆的部分？

例如，如果我克隆一次，结果两次。我想通过点击第二个按钮来克隆第二个。我的代码不会那样工作，因为我用class =＆＃34; cloner＆＃34;克隆整个div。克隆按钮将克隆每个现有的。我如何只克隆＆＃34;选择＆＃34;要克隆的部分？

如果你只能回答我的一个问题，那就没关系。我同样感谢你的回答。

提前谢谢。

Answer 1

我不是真的确定你想要这样做的原因，但你可以将click功能绑定到实际的按钮。这样，动态创建的内容也将起作用。

$(document).ready(function(){

$('#locations').on('click', '.clone', function(){
//(parent container).on( event, object to bind, function
 
  $('.cloner:first').clone().appendTo("#locations").addClass('new');
});
  
  
// adding '.cloner:first' means it will 
// only clone the first instance, 
// rather than cloning clones of clones.....

});

.new { background: #eee; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="locations" class="tabcontent">
 <div class="cloner">
  <p>This is the paragraph</p>
  <button class="clone">clone</button>
  <div id="cloner2">
   <button class="clone">clone2</button>
   <div>
    <button class="clone">clone3</button>
   </div>
  </div>
 </div>
</div>

至于克隆特定部分，你只需要定位你想克隆的东西....

$(document).ready(function(){

$('#locations').on('click', '.clone', function(){
    $('.cloner p').clone().appendTo("#locations");
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="locations" class="tabcontent">
 <div class="cloner">
  <p>This is the paragraph</p>
  <button class="clone">clone</button>
  <div id="cloner2">
   <button class="clone">clone2</button>
   <div>
    <button class="clone">clone3</button>
   </div>
  </div>
 </div>
</div>

如何使复制按钮的功能与jQuery中的原始按钮相同？

1 个答案: