Уничтожение клонированного элемента (нельзя выбрать первый экземпляр) - PullRequest
Новая
       18

Уничтожение клонированного элемента (нельзя выбрать первый экземпляр)

0 голосов
/ 06 июня 2018

Я тестирую некоторые общие функции построения и столкнулся с этой проблемой - не могу выбрать первый клонированный элемент, используя синтаксис 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>

1 Ответ

0 голосов
/ 07 июня 2018

Нет, проблема не в том, что элементы связаны или не связаны со слушателями.Проблема в этой строке 

    cloneAndAppendCounter++;

или, точнее, в том месте, куда вы его положили, потому что, как оказалось, это играет драматическую роль.

Итак, дело в том, что вы добавляете элемент с определенным идентификатором к цели, а затем увеличиваете счетчик.Таким образом, к тому времени, когда вы нажимаете кнопку 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>
...