銷毀克隆的元素（無法選擇第一個實例）

Question

我正在測試一些通用的函數構建，並且遇到了這個問題-無法使用jQuery語法選擇第一個克隆的元素。 是由於eventListeners不在第一位嗎？ 如果是這樣，如何將eventListener添加到在克隆之前DOM中不存在的內容？

 var cloneAndAppendCounter = 0; function cloneAndAppend (what, target, maxClones) { var id = what.attr('id'); var clone = what.clone(true); var target = target; if ( cloneAndAppendCounter < maxClones ) { clone.attr('id', id + cloneAndAppendCounter); clone.appendTo(target); cloneAndAppendCounter++; } }; function destroyClonedElement (originalElement, when) { var originalElementId = originalElement.attr('id'); var clonedElementId = originalElementId + cloneAndAppendCounter; var cloned = $('#' + clonedElementId); console.log('clonedElementId:', clonedElementId); console.log(cloned); if ( (cloned) && cloneAndAppendCounter > 0 ) { cloned.remove(); cloneAndAppendCounter--; console.log('counter: ', cloneAndAppendCounter); }; }; $('.clone-button').click(function () { cloneAndAppend($('#app'), $('.container'), 4); }); $('.destroy-button').click(function () { destroyClonedElement($('#app')); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="clone-button">clone button</button> <button class="destroy-button">destroy button</button> <div class="container"> <div id="app">test</div> </div> 

Answer 1

不，問題不在於元素是否綁定到偵聽器。 問題是在這條線

    cloneAndAppendCounter++;

或更確切地說是放在您放置的位置，因為事實證明它起着戲劇性的作用。

因此，事情是，您將具有特定id的元素附加到目標，然后增加了計數器。 因此，當您按下“ remove按鈕時，計數器的數量比附加子項的數量多一個，因此這就是為什么第一次單擊無效的原因-因為它沒有用。

這是一個有效的腳本（我將有問題的行重新排列到最適合的位置，此外還更改了初始計數器）：

 var cloneAndAppendCounter = -1; function cloneAndAppend (what, target, maxClones) { var id = what.attr('id'); var clone = what.clone(true); var target = target; if ( cloneAndAppendCounter < maxClones ) { cloneAndAppendCounter++; clone.attr('id', id + cloneAndAppendCounter); clone.appendTo(target); // console.log('counter: ', cloneAndAppendCounter); } }; function destroyClonedElement (originalElement, when) { var originalElementId = originalElement.attr('id'); var clonedElementId = originalElementId + cloneAndAppendCounter; var cloned = $('#' + clonedElementId); // console.log('clonedElementId:', clonedElementId); // console.log(cloned); if ( cloned && cloneAndAppendCounter > -1 ) { cloned.remove(); cloneAndAppendCounter--; // console.log('counter: ', cloneAndAppendCounter); }; }; $('.clone-button').click(function () { cloneAndAppend($('#app'), $('.container'), 4); }); $(document).on('click','.destroy-button', function (e) { e.preventDefault(); destroyClonedElement($('#app')) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="clone-button">clone button</button> <button class="destroy-button">destroy button</button> <div class="container"> <div id="app">test</div> </div>