侧边栏中的 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'....

Answer 2

.on()您遇到的问题是，无论何时评估该功能，都会创建您的点击处理程序。问题是您执行了多次。相反，您需要执行几个步骤以获得优雅的解决方案：

#1

action-edit在填充元素之前找到一个存在的标签。在最坏的情况下，body我建议你需要开始试验

$(function() {

    $('body').on("click", '.action-edit',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);

        })

    });

});

请注意，这需要恰好运行一次，并且会自动click为您创建处理程序。

#2

找到最接近您的网格的标签，该标签在页面加载时已经存在，并相应地更改选择器。

#3

测试，测试，测试