@vigaset12

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

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 не опознается. Как решить эту проблему?
  • Вопрос задан
  • 75 просмотров
Решения вопроса 2
@VA_ic2b
1. Оформите функцию инициализации события click для deleteButtons.
2. В функции addComment после определения deleteButtons вызовите функцию инициализации передав в нее уже определенные элементы.
Ответ написан
Комментировать
Geminix
@Geminix
Фуллстек nuxt, .net разработчик
Попробуйте добавить клик после этого блока
deleteButtons = $(document).find('.comments__delete');
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
10 авг. 2022, в 22:56
3000 руб./за проект
10 авг. 2022, в 21:54
10000 руб./за проект
10 авг. 2022, в 21:48
3000 руб./за проект