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

測試，測試，測試