0

На странице изначально есть одно текстовое поле, на которое я вешаю событие по типу:

$("input[name='upsale']").change(function(e){
  e.preventDefault();
  ...
});

Но на странице текстовые поля могут динамически удаляться и добавляться. Пользователь нажимает на плюс, и ниже появляется такое же текстовое поле, на которое нужно повесить этот же обработчик. Как это можно реализовать, чтоб каждый раз не вешать заново обработчики?

4
  • по моему через Promises 6 апр 2019 в 12:02
  • Ну в вашем случае я прочитал пост, просто нужно грамотно все написать чтобы ивентлистенер обновлялся или добавлялся к каждому полю после нажатия на плюс. Надо видеть весь код, (так без кода)ничего не скажу 6 апр 2019 в 12:08
  • Как повесить обработчик событий на объект, которого еще нет на странице? - никак, обработчик можно повесить только на элементы которые уже есть.
    – Grundy
    6 апр 2019 в 13:06
  • Возможный дубликат вопроса: Как повесить обработчик события на элементы загруженные Ajax
    – Alex
    6 апр 2019 в 15:30

1 ответ 1

1

В ситуациях когда

на странице текстовые поля могут динамически удаляться и добавляться

, можно обрабатывать событие на таких элементах двумя способами:

  • Добавив один общий слушатель события общему контейнеру всех элементов
    (контейнер не обязательно должен быть непосредственным родителем, это может быть даже body. Обработка событий возможна при их захвате или всплытии - примеры ниже работают со всплытием)

  • Добавляя обработчик события каждому новому элементу после его создания
    (этот способ на самом деле лучше, так как он обеспечивает более предсказуемое поведение. Каждый раз создавать новую функцию не обязательно - можно переиспользовать одну общую)


При использовании jQuery, первый вариант выглядит примерно следующим образом:

$('.foo').on('change', '.bar', function () {
  let rndColor = '#' + Math.floor(Math.random() * 0x777 + 0x777).toString(16); 
  $(this).css('background', rndColor); 
}); 

$('.btn-add').click(function () {
  $('.foo').first().append('<input class="bar">'); 
}); 
.bar { display: block; margin: 0.25rem 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="foo">
  <input class="bar">
</div>
<button class="btn-add">Добавить поле ввода</button>

А без jQuery, можно реализовать так:

for (const foo of document.querySelectorAll('.foo') {
  foo.addEventListener('change', e => {
    if (!e.target.matches('.bar')) return; 
    let rndColor = '#' + Math.floor(Math.random() * 0x777 + 0x777).toString(16); 
    e.target.style.background = rndColor; 
  }); 
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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