为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕神8447489 2023-01-06 11:11:39

我有一个表,里面有一些记录,每条记录都可以编辑。我有一个带有编辑表单的侧边栏,具有相同的输入和相同的提交按钮。当我尝试在发送 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);

        })


    });


查看完整描述

2 回答

?
有只小跳蛙

TA贡献1566条经验 获得超7个赞

我认为问题在于您click每次显示新编辑器时都会添加新的事件侦听器,但不会删除以前的事件侦听器。

尝试$('.add-data-btn').off()$('.add-data-btn').on('click'....


查看完整回答
反对 回复 2023-01-06
?
Helenr

TA贡献1535条经验 获得超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

测试,测试,测试


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 12 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信