Почему запросы ajax срабатывают несколько раз

У меня есть форма внутри модального окна, которое либо сохраняет заметку при нажатии одной кнопки, либо удаляет ее при нажатии другой. Элементы сохраняются/удаляются, но количество запросов увеличивается с каждым кликом. Я получаю 4 одинаковых запроса и т. д. Как мне это остановить. я должен что-то отвязать?

$('#modal').on('show.bs.modal', function (e) {
    var origin = $(e.relatedTarget);
    var memoId = origin.attr('data-id');        

    $('#modal').click(function(event){
        if ($(event.target).hasClass('memo-save')) {

            event.preventDefault();

            var memoText = $(event.target).parent().parent().find('textarea').val();

            var memo = {
                memo: memoText,
                id: memoId
            }

            $.ajax({
                type: "POST",
                url: '/memos/add-memo?memo=' +memo+'&id=' + memoId,
                data: memo,
                success: function (result) {
                    $(event.target).toggleClass('active').html('Memo Saved');
                }
            });


        } else if ($(event.target).hasClass('memo-delete')) {

            event.preventDefault();

            var memoText = "";

            var memo = {
                id: memoId
            }

            $.ajax({
                type: "POST",
                url: '/memos/remove-memo?id=' + itemId,
                data: memo,
                success: function (result) {
                    $(event.target).toggleClass('active').html('Memo Deleted');
                }
            });
        }


    });
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
36
1

Ответы 1

вы можете переместить $('#modal').click за пределы $('#modal').on('show.bs.modal', таким образом, он не будет повторно добавлять слушателя каждый раз, когда отображается модальное окно.

Другие вопросы по теме