javascript - 销毁克隆元素(无法选择第一个实例)

Question

我正在测试一些通用函数构建，并遇到了这个问题 - 无法使用 jQuery 语法选择第一个克隆元素。是因为 eventListeners 不存在于第一个中吗？如果是这样，如何将事件监听器添加到克隆之前不存在于 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

不，问题不在于元素是否绑定(bind)到监听器。 问题出在这一行

    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>