Не ловится клик по элементу добавленному через append

Question

Даже не знаю что еще добавить. Должно же работать. Добавляю

<button class="delete_button">

Потом пытаюсь словить клик, и не ловится.

let ebc = 0;

$('#add_block').click(function(){
    ebc+=1
    $('.add_block_block').append('<div id="ebc' + ebc + '">Какой то блок</div><div><button  class="delete_button" id="del' + ebc + '">Delete it</button></div>')
})

$('.delete_button').click(function(){
    let his_id = $(this).get('id');
    console.log('abrvalg');
    console.log('Need to delete ' + his_id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="add_block_block">
                <p>Добавление полей</p>
                <button id='add_block'>Добавить блок</button>
            </div>

Answer 1

Клик вы вешаете на элемент, которого ещё нет на странице, поэтому на новых жлементах он не работает. Выхода два

Вешать клик на элемент в той же функции, что и добавляете.

Использовать делегирование:

$(document).on('click', '.delete_button', function(){
 ....

БЛОГ НА HUSL

Не ловится клик по элементу добавленному через append

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