jQuery 多个 forms 在侧边栏中具有相同的提交

Question

我有一张表，里面有一些记录，每条记录都可以编辑。 我有一个带有编辑表单的侧边栏，其中包含相同的输入和相同的提交按钮。 当我尝试在该按钮上执行 function 将发送 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 $('.add-data-btn').on('click'...之前执行$('.add-data-btn').off() 。

Answer 2

您遇到的问题是，每当评估.on() function 时，都会创建您的点击处理程序。 问题是您多次执行该操作。 取而代之的是，您需要执行几个步骤以获得优雅的解决方案：

#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

测试，测试，测试