Question

我想点击ADD链接克隆一个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>

Answer 1

您需要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！

Answer 2

有一些错误：

将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>

在javascript问题中克隆div

2 个答案: