我已經克隆了包含克隆其父母的按鈕的 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>uj5u.com熱心網友回復：
一些東西。
- 使用延遲點擊處理程式更容易。
- 您正在克隆所有“可克隆”，而不僅僅是
first. jQuery 會找到所有cloneable并克隆它們，而不僅僅是您的原始檔案。 - 現在洗掉會洗掉您單擊的那個，而不是最后一個。
- 類將
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>uj5u.com熱心網友回復：
$(".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')。然后您可能會看到它每次都變大并且它們指向所有現有元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/463088.html
標籤：javascript html jQuery