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

【问题标题】：How to make copied buttons to function as same as the original button in jQuery?如何使复制的按钮与jQuery中的原始按钮功能相同？
【发布时间】：2024-01-05 23:54:01
【问题描述】：

在我更具体地问之前，我必须做出一个假设。每个代码都必须构建在一个 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.) 克隆按钮也能正常工作。

如果我一开始点击“克隆”按钮，它将成功克隆整个（克隆2和克隆3也是如此）。

Cloned 将拥有自己的“clone”、“clone2”和“clone3”按钮。我希望那些克隆按钮的功能与原始按钮相同，但我编码的方式并没有让它们这样做。那些克隆的按钮什么都不做，而原始的克隆按钮仍然起作用。

你能告诉我如何修复我的代码以使克隆按钮按我的预期工作吗？

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

如何仅克隆要克隆的“选定”部分？

例如，如果我克隆一次，则生成两个 .我只想通过单击 second 中的按钮来克隆 second 。我的代码不会那样工作，因为我正在使用 class="cloner" 克隆整个每个 div，该克隆按钮将克隆每个现有的 .如何仅克隆要克隆的“选定”部分？

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

提前谢谢你。

【问题讨论】：

标签： jquery html function clone

【解决方案1】：

我真的不确定您为什么要这样做，但您可以将点击功能绑定到实际按钮。这样动态创建的内容也将起作用。

$(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>

【讨论】：