1

Если элемент 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();
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <input type="text"> <a href="#" class="delete">x</a>
</div>
<input type="button" value="+" id="but">

3
  • 1
    Если удалить все строки, плюсик не добавит новую. Ловите баг)
    – Denis
    Commented 16 февр. 2016 в 7:45
  • @Denis вопрос сейчас не про это. Commented 16 февр. 2016 в 7:58
  • 1
    нет не обязательно, достаточно повесить обработчик на контейнер и делегировать событие по селектору, все это делается функцией on которая уже используется
    – Grundy
    Commented 16 февр. 2016 в 8:06

1 ответ 1

3

На вновь созданных элементов нет обработчиков, поэтому их надо добавлять вручную. Отличительная особенность функций 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();
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rows">
  <div class="row">
    <input type="text"> <a href="#" class="delete">x</a>
  </div>
</div>
<input type="button" value="+" id="but">

5
  • небольшое уточнение: live - удален начиная с версии 1.9, остальные не помечены deprecated, но, delegate внутри себя вызывает on с теми же параметрами, а bind вызывает on но без параметра selector. Поэтому поведение может немного отличаться
    – Grundy
    Commented 16 февр. 2016 в 8:20
  • @Grundy, спасибо за уточнения, немного поправил ответ, что бы не вводить людей в заблуждения.
    – Alex Krass
    Commented 16 февр. 2016 в 8:24
  • @AlexKrass так ведь .row тоже вновь созданный элемент, как так получается, что ему/потомку делегирован обработчик? Или это просто особенность трехпараметрового on? Commented 16 февр. 2016 в 8:34
  • @Jean-Claude, обработчик висит на внешнем .rows и на самом деле он обрабатывает событие click(+ оптимизация, создается только один обработчик). Как только вы нажали на любой элемент внутри .rows, событие всплывает и перехватывается им. При этом в JS есть возможность определить на какой элемент внутри вы нажали, как раз второй параметр '.delete' задает ограничение, для каких элементов выполнится функция removeRow, остальные будут проигнорированы. То есть обработчик делегируется(передается) верхнему контейнеру, который все разруливает.
    – Alex Krass
    Commented 16 февр. 2016 в 8:46
  • @AlexKrass да, спасибо, я не заметил rows и row. Commented 16 февр. 2016 в 8:50

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.