销毁克隆的元素（不能 select 第一实例）

Question

我正在测试一些通用函数构建并遇到了这个问题 - 无法使用 jQuery 语法 select 第一个克隆元素。是因为 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>

销毁克隆的元素（不能 select 第一实例）

Destroying cloned element (can't select first instance)

javascript

jquery

clone

destroy