eventListener не улавливает созданные элементы

Question

у мне нужно сделать todo list, то есть когда я нажимаю на checkbox елемент должен пропасть, и все прекрасно работает, только, если создать через кнопку такой же елемент, почему-то обработчик не слушает

$('.main__add-btn').on('click', function() {
  // показать форму 
  $('.main__form-create').show();
})


$('.main__add-task').on('click', function() {

  let valueOfTextarea = $('.main__task-input').val();

  // $('.main__add').append(`<p>${valueOfTextarea}</p>`)

  $('.main__new-tasks').append(`<li class="main__task-in-progress">
            <label>
            <input type="checkbox" class="main__task-checkbox" name="taskName" >
            ${valueOfTextarea}
            <label>
        </li>`)
})

let checkbox = $('input[type="checkbox"]')


//
$(document).on('click', '.main__task-checkbox', function() {
    console.log($(this).attr('class'));
    $(this).closest('.main__task-in-progress').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="main">
  <div class="main__add">
    <ul class="main__new-tasks">
      <li class="main__task-in-progress">
        <label>
                        <input type="checkbox" class="main__task-checkbox" name="taskName" id="task1">
                        выывывы
                    <label>
                </li>
                <li class="main__task-in-progress">
                    <label>
                        <input type="checkbox" class="main__task-checkbox" name="taskName" id="task1">
                        выывывы
                    <label>
                </li>
                <li class="main__task-in-progress">
                    <label>
                        <input type="checkbox" class="main__task-checkbox" name="taskName" id="task1">
                        выывывы
                    <label>
                </li>
            </ul>
            <a href="#" class="main__add-btn">Add task</a>
            <div class="main__form-create disabled">
                <form action="#" method="dialog" class="main__form">
                    <div class="main__task-info">
                        <input type="text" class="main__task-input" placeholder="I need to do...">
                    </div>
                    <div class="main__buttons">
                        <button class="main__add-task">Add task</button>
                        <button class="main__cansel">Cansel</button>
                    </div>
                </form>
            </div>
        </div>
    </main>

в данном коде jquery, простите я не знаю как его подключить к Stack

Answer 1

В момент выполнения кода с созданием блока .main__task-checkbox, он не получает от цикла .addEventListener, следовательно JS и знать не знает о новых блоках.

Лучше всего для такого использовать делегирование событий

на JS

document.addEventListener('click', function(e) {
  if(e.target.classList.contains('main__task-checkbox')) {
    console.log(ee.target.className);
    elem.parentElement.parentElement.remove();
  }
});

На JQ

$(document).on('click', '.main__task-checkbox', function() {
    console.log($(this).attr('class'));
    $(this).closest('.main__task-in-progress').remove();
});

БЛОГ НА HUSL

eventListener не улавливает созданные элементы

Ответы (1 шт):