[英]jQuery event triggered multiple times
I have cloned divs containing buttons that clone their parents.我已经克隆了包含克隆其父母的按钮的 div。 Upon trying to click the buttons, events are triggered 2n
times such that clicking the second clone produces 4 other clones and so on:尝试单击按钮时,会触发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>
A few things.一些东西。
first
.您正在克隆所有“可克隆”,而不仅仅是第first
。 jQuery will find all cloneable
and clone them, not just your original. jQuery 将找到所有可cloneable
的并克隆它们,而不仅仅是您的原始文件。disabled
class will be added/removed to the rem
button, depending on if there is only one left or not. 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>
$(".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>
So, what's happening in your method is that you are doing a new query each time you click and it returns all the .clonable
elements and then clones them.因此,您的方法中发生的情况是,您每次单击时都会执行一个新查询,它会返回所有.clonable
元素,然后克隆它们。 What you want is to only find the one relevant to the item you clicked on, so you want to start with $(this)
which is the item clicked and then you can use the parent()
method to go up the DOM tree looking for the selector.你想要的是只找到与你点击的项目相关的那个,所以你想从$(this)
开始,这是点击的项目,然后你可以使用parent()
方法去寻找 DOM 树选择器。
In these sorts of situations, it can help to put a debugger;
在这些情况下,放置debugger;
inside your click event and then execute the method one at a time.在您的点击事件中,然后一次执行一个方法。 Like $('.clonable')
.像$('.clonable')
。 You can then see maybe that it gets larger every time and that they point to all the existing elements.然后您可能会看到它每次都变大并且它们指向所有现有元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.