Почему не передаются кнопки из обновленного DOM?

Question

[vigaset12]

const comments__results = $('.comments__results');
var deleteButtons;

function addComment(e){
    e.preventDefault();

    var name = $('.create-comments__input--name').val();
    var surname = $('.create-comments__input--surname').val();
    var message = $('.create-comments__input--message').val();


    $.ajax({
        url: '../../php/comments.php',
        type: 'POST',
        dataType: 'json',
        data: {
            name: name,
            surname: surname,
            message: message
        },

        success: function(result){
            comments__results.html(result.errors);

            if(result.comment[0]['user_id'] == result.user_id){
                $(".comments__body").append(`
                <div class="comments__item">
                    <div class="comments__people">
                        <div class="comments__name">${result.comment[0]['name']}</div>
                        <div class="comments__surname">${result.comment[0]['surname']}</div>
                    </div>
                    <div class="comments__control">
                        <p class="comments__change">Изменить</p>
                        <p class="comments__delete" id="${result.comment[0]['id']}">Удалить</p>
                    </div>
                    <div class="comments__message">${result.comment[0]['message']}</div>
                </div>
                `);

                deleteButtons = $(document).find('.comments__delete');
            }
        }
    });
}



$('.create-comments__button').click(addComment);


deleteButtons.click(function(){
    var _this = $(this);
    
    $.ajax({
        url: `../../php/delete_comments.php`,
        type: 'POST',
        data: {
            id: _this.attr('id')
        },

        success: function (){
            _this.parents('.comments__item').remove();
        }
    });
})

Когда ajax запрос в функции addComment выполняется успешно, создается комментарий, и там содержатся кнопки удаления. Я хочу отследить нажатие по этим кнопкам. Так как jquery обрабатывает элементы только на моменте инициализации, я сделал поиск кнопок в переменную, после добавление их в dom, а потом уже обращаюсь к этим кнопкам через переменную. У меня ничего не работает, переменная deleteButtons не опознается. Как решить эту проблему?

Answer 1

[VA_ic2b]

1. Оформите функцию инициализации события click для deleteButtons.
2. В функции addComment после определения deleteButtons вызовите функцию инициализации передав в нее уже определенные элементы.

Answer 2

[GeminiX]

Попробуйте добавить клик после этого блока

deleteButtons = $(document).find('.comments__delete');