jQuery事件多次触发

Question

我的divs克隆了，其中包含将父母克隆的按钮。尝试单击按钮后，事件被触发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>

What could I be doing wrong?

Answer 1

几件事。

1. 使用递延点击处理程序更容易。
2. 您正在克隆所有“可克隆”，而不仅仅是first。 jQuery会找到所有可克隆，而不仅仅是您的原始内容。
3. 现在删除您单击的那个，而不是最后一个。
4. 禁用的类将被添加/删除到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>

Answer 2

$(".add").on("click", function(e) {  $(this).parent(".cloneable").clone(true).appendTo(".container");
});

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

因此，方法中正在发生的事情是，您每次单击时都在进行新的查询，并且它返回所有.clonable elements，然后再克隆。您想要的只是找到与您单击的项目相关的一个，因此您要以$（this）开始，这是单击的项目，然后您可以使用parent（ ）沿着DOM树寻找选择器的方法。

在这种情况下，可以在单击事件中放置调试器;，然后一次执行方法。像$（'。clonable'）。然后，您可以看到它每次都会变得更大，并且它们指出了所有现有元素。