javascript - 侧边栏中的jQuery多个表单具有相同的提交

Question

我有一张表，里面有一些记录，每条记录都可以编辑。我有一个带有编辑表单的侧边栏，其中包含相同的输入和相同的提交按钮。当我尝试在该按钮上执行将发送 AJAX 请求的功能时，它执行的次数是我之前打开的侧边栏的次数，而我只需要更新实际编辑的记录。
那是代码:

    // On Edit
    $('.action-edit').on("click",function(e){
        e.stopPropagation();
        $(".add-new-data").addClass("show");
        $(".overlay-bg").addClass("show");

        const row = $(this).closest('td').parent('tr').first();
        const agendaID = row.data('agenda_id');
        const form = document.querySelector('#update_form');
        const url = $(form).data('action_url').replace('.ID.', agendaID);

        getAgendaInfo(agendaID);

        $('.add-data-btn').on('click', function (e){
            e.preventDefault();
           
            console.log(agendaID); // displays IDs of all records where sidebar was opened. 

            const ajaxData = grabFormData();

            editAgenda(url, row, ajaxData);
        })

    });

Answer 1

我认为问题在于您要添加新的 click每次显示新编辑器时的事件监听器，但不会删除以前的事件监听器。
尝试做$('.add-data-btn').off()在 $('.add-data-btn').on('click'... 之前.