Всегда надо добавлять addEventListener созданному скриптом объекту?

Jean-Claude

Если элемент DOM создается динамически на странице и в нем должна быть кнопка/ссылка с функцией, всегда надо добавлять таким элементам addEventListener ?

Пример.

Строка с текстовым input, ниже кнопка "+ добавить строку", если добавить строку без addEventListener (сделал это в 6-й строке $('.row:last a').on('click', removeRow);) то строку невозможно удалить, так как a.delete не сработает, на ссылке нет функции removeRow().

Всегда надо созданным элементам добавлять функции, которые они запускают? Задаю потому, что где-то мелькнула информация, что при применении "bind/live" вместо "on" этого делать не требуется.

$(function(){
  $('#but').on('click', function(){
    var row = $('.row:last');
    row.clone().insertAfter(row);
    //addeventlistener
   $('.row:last a').on('click', removeRow);
  });
  
  $('.delete').on('click', removeRow);
  
  function removeRow(){
    $(this).closest('.row').remove();
  }
})
<div class="row">
   <a href="#" class="delete">x</a>
</div>
1 ответ

Jean-Claude

На вновь созданных элементов нет обработчиков, поэтому их надо добавлять вручную. Отличительная особенность функций bind, live, delegate, on в том, что они это делают за Вас и при их правильном использовании этого делать не надо. При этом обработчик on является более новым и объединяет в себе функциональность трех первых, которые в новых версиях JQuery желательно уже не использовать.

Используйте делегирующий способ задания обработчиков через on на контейнер верхнего уровня.

$(function(){
  $('#but').on('click', function(){
    var row = $('.row:last');
    row.clone().insertAfter(row);
  });
  
  $('.rows').on('click', '.delete', removeRow);
  
  function removeRow(){
    $(this).closest('.row').remove();
  }
})
<div class="rows">
  <div class="row">
     <a href="#" class="delete">x</a>
  </div>
</div>

licensed under cc by-sa 3.0 with attribution.