在javascript问题中克隆一个div答案

【问题标题】：Cloning of a div in javascript issue在javascript问题中克隆一个div
【发布时间】：2015-12-26 21:44:33
【问题描述】：

我想通过单击添加链接克隆一个 div。但是当一个 div 被克隆时，一个新的克隆 div ADD 链接的行为与之前的 ADD 链接不同。我想实现这个功能。请帮忙。

<!doctype html>
<html>
  <head>
    <title>Javascript prototype</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
    <script type="text/javascript" src="prototyp.js"></script>
    <script type="text/javascript"></script>
  </head>
  <body>
    <script>
      $(document).ready(function(){
        $(".add_option").click(function(){
          console.log("clicked !");
          $('<div id="cloned">\n\
            <input type="checkbox" >\n\
            <input type="text"> \n\
            <a href="#" ><span >ADD </span></a> \n\
            <a href="#" class="remove-option"><span> REMOVE</span></a>\n\
            </div>').clone().appendTo('#cloned');
          $('span').addClass('add_option');
        });
      });
    </script>
    
    <div id="cloned">
      <input type="checkbox">
      <input type="text">
      <a href="#"><span  class="add_option">ADD</span></a>
      <a href="#" class="remove-option"><span>REMOVE</span></a>
    </div>
  </body>
</html>

【问题讨论】：

id 属性应该是一。有吗？

标签： javascript jquery clone

【解决方案1】：

有一些错误：

将id 替换为class。然后，使用$('.cloned')。
将add_option类名移动到<a href="#" class="add_option"><span>ADD</span></a>
当你点击a时使用return false
只需复制此代码$('.cloned:last').after($('.cloned:last').clone());

<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript">

</script>

</head>
<body>


<script>
$(document).ready(function () {
    $(document).on("click", ".add_option", function () {
        console.log("clicked !");
        $('.cloned:last').after($('.cloned:last').clone());
        return false;
    });
    $(document).on("click", ".remove-option", function () {
        $(this).closest(".cloned").remove();
        return false;
    });
});
</script>


<div class="cloned">
<input type="checkbox">
<input type="text">
<a href="#" class="add_option"><span>ADD</span></a>
<a href="#" class="remove-option"><span>REMOVE</span></a>
</div>

</body>
</html>

【讨论】：

非常感谢。嘿，我可以在 gmail / fb 上将你添加到我的朋友列表中吗？
你的回答太棒了，我非常感谢你。如果你不介意，请在 aryanpra16dec@gmail.com 上添加我的 gmail/fb。

【解决方案2】：

您需要Event delegation 将事件附加到动态添加的元素：

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

 $(document).ready(function(){
                $("body").on('click','.add_option',function () {

                 console.log("clicked !");
            $('<div id="cloned">\n\
    <input type="checkbox" >\n\
    <input type="text"> \n\
    <a href="#" ><span >ADD </span></a> \n\
    <a href="#" class="remove-option"><span> REMOVE</span></a>\n\
    </div>').clone().appendTo('#cloned');
            $('span').addClass('add_option');
        });
            });

注意：您为元素提供的 ID 也应该是唯一的，在您的情况下，相同的 ID 将传递给您克隆的每个 div！

【讨论】：

如何实现删除 div 的相同功能。
你可以使用 jquery 的 remove() 函数
$(document).ready(function(){ $("body").on('click','.add_option',function (){ console.log("clicked !") ; $('
\n\ \n\ \n\ ADD span> \n\ REMOVE\n\
').clone().appendTo('#cloned'); $('span').addClass('add_option'); }); $("body").on('click','.remove_option',function (){ $('#cloned').remove() ; }); });
我已经这样做了，它删除了所有具有 id = 'clone' 的 div。
当然会！不要给他们相同的ID，给他们唯一的ID