jQuery事件多次触发

Question

我已经克隆了包含克隆其父母的按钮的 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. 您正在克隆所有“可克隆”，而不仅仅是第first 。 jQuery 将找到所有可cloneable的并克隆它们，而不仅仅是您的原始文件。
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>

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元素，然后克隆它们。 你想要的是只找到与你点击的项目相关的那个，所以你想从$(this)开始，这是点击的项目，然后你可以使用parent()方法去寻找 DOM 树选择器。

在这些情况下，放置debugger; 在您的点击事件中，然后一次执行一个方法。 像$('.clonable') 。 然后您可能会看到它每次都变大并且它们指向所有现有元素。