jQuery multiple forms in sidebar with same submit

Question

I have a table with some records in it and each of that records can be edited. I have a sidebar with edit form in it with the same inputs and the same submit button. When I try to execute the function on that button which will send an AJAX request, it executes as many times as many sidebars I opened before, when I need to update only that record which was actually edited.

That's the code:

    // 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

I think the issue is that you are adding new click event listener each time you show a new editor but you don't remove the previous event listener.

Try doing $('.add-data-btn').off() before the $('.add-data-btn').on('click'... .

Answer 2

The problem you have is that your click handler is created whenever that .on() function is evaluated. The issue is that you execute that multiple times. Instead of that, you will need to perform a few steps for an elegant solution:

#1

Find a tag which exists before you populate your action-edit elements. In the worst case that would be body and I suggest that you need to start experimenting with

$(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);
        })

    });
});

Note that this needs to run exactly once and will automatically create click handlers for you.

#2

Find the closest tag to your grid which already exists at the time the page is loaded and change the selector accordingly.

#3

Test, test, test