javascript - jQuery 事件多次触发

Question

我克隆了包含克隆其 parent 的按钮的 div。尝试单击按钮时，事件会被触发 2n 次，这样单击第二个克隆就会产生 4 个其他克隆，依此类推:

$(".add").off("click").on("click", function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();
  $(".cloneable").clone(true).appendTo(".container");
});

$(".rem").off("click").on("click", function() {
  if (document.getElementsByClassName('container')[0].childElementCount > 1) {
    $(".cloneable:last").remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cloneable">
    <div>
      <a class="btn btn-primary add" role="button">Add cell</a>
      <a class="btn btn-primary rem" role="button">Remove cell</a>
    </div>
    <iframe src="index.php"></iframe>
  </div>
</div>

我可能做错了什么？

Answer 1

一些事情。

1. 使用延迟点击处理程序更容易。
2. 您正在克隆所有“可克隆”的内容，而不仅仅是第一个。 jQuery 将找到所有可克隆并克隆它们，而不仅仅是您原来的。
3. 现在删除会删除您点击的那个，而不是最后一个。
4. disabled 类将添加/删除到 rem 按钮，具体取决于是否只剩下一个。

$(".container").on("click", ".add", function(e) 
{
  e.stopPropagation();
  e.stopImmediatePropagation();
  $(".container .rem").removeClass("disabled");
  
  let $cloneable = $(".cloneable").first().clone(true);
  $cloneable.appendTo(".container");
  
}).on("click", ".rem", function() 
{
  if($(this).hasClass("disabled") ) return;
  
  $(this).closest(".cloneable").remove();
  
  if($(".container .rem").length === 1)
    $(".container .rem").addClass("disabled");  
});

.btn.btn-primary
{
  background:#d5d5d5;padding:4px;cursor:pointer;
}

.btn.btn-primary.disabled
{
  background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cloneable">
    <div>
      <a class="btn btn-primary add" role="button">Add cell</a>
      <a class="btn btn-primary disabled rem" role="button">Remove cell</a>
    </div>
    <iframe src="trial37.php"></iframe>
  </div>
</div>