如何阻止按钮触发先前事件侦听器的多个事件

Question

我有一个交易表，每个交易表都有一个编辑按钮来编辑数据，然后将其保存到数据库中。我的问题是，如果我单击编辑一个，然后单击多个其他，它们都会使用相同的数据保存。因此，如果我单击前五个编辑按钮，那么在我单击的最后一个编辑按钮上，我将数量更改为 5，我之前单击的所有编辑按钮在保存后也会更改为 5。

我尝试删除保存和编辑按钮的事件侦听器，但无济于事。问题似乎是因为事件侦听器保留在后台并正在运行，因为保存按钮和编辑按钮都是相同的类名。只要您点击“取消”，一切都会正常工作，但如果您单击一个编辑按钮，然后单击另一个按钮，您就会有两个实例。当他们单击不同的编辑按钮时，我可以删除 saveBtn 事件侦听器的方法是什么？

const csvToTable = (csv, transactionIdsAtIndex) => {
    let rows = csv.trim().split(/\r?\n|\r/);
    let table = '';
    let tableRows = '';
    let tableHeader = '';
    rows.forEach((row, rowIndex) => {
        let tableColumns = '';
        let columns = row.split(','); // split/separate the columns in a row
        if (rowIndex === 0) {
            columns.unshift('');
        } else {
            columns.unshift('<button class="btn edit">Edit</button>');
        }
        columns.forEach((column) => {
            tableColumns += rowIndex == 0 ? '<th>' + column + '</th>' : '<td>' + column + '</td>';
        });
        if (rowIndex == 0) {
            tableHeader += `<tr id="${rowIndex}">` + tableColumns + '</tr>';
        } else {
            tableRows += `<tr id="${rowIndex}">` + tableColumns + '</tr>';
        }
    });
    table += '<table>';
    table += '<thead>';
        table += tableHeader;
    table += '</thead>';
    table += '<tbody>';
        table += tableRows;
    table += '</tbody>';
    table += '</table>';
    if (csvTable.classList.contains('hidden')) {
        csvTable.classList.remove('hidden');
    }
    csvTable.innerHTML += table;
    downloadBtn.classList.remove('hidden');
    handleEvents(transactionIdsAtIndex);
}

const handleEvents = (transactionIdsAtIndex) => {
    const editBtn = document.querySelectorAll('.edit');
    editBtn.forEach(btn => btn.addEventListener('click', function editTransaction() {
        editTransactionForm(transactionIdsAtIndex[btn.parentElement.parentElement.id]);
        btn.removeEventListener('click', editTransaction);
    }));
}

const editTransactionForm = (id) => {
    console.log('editing')
    editForm.classList.remove('hidden');
    downloadMenu.classList.add('hidden');
    downloadBtn.classList.add('hidden');

    api.call('Get', {typeName: 'FuelTransaction', search: {id: id}}, result => {
        const transaction = result[0];
        volume.value = (transaction.volume / 3.785412534257983).toFixed(2);
        cost.value = transaction.cost.toFixed(2);
        pricePerUnit.value = (cost.value / volume.value).toFixed(2);
        fuelType.value = transaction.productType;

        saveBtn.addEventListener('click', function validateFormData () {
            console.log('saving');
            let valid = true;
            if (isNaN(volume.value) || isNaN(cost.value) || isNaN(pricePerUnit.value)) {
                valid = false;
                popupText.textContent = 'Input must be a number';
                popup.classList.remove('hidden');
            } else if (!volume.value || !cost.value || !pricePerUnit.value) {
                valid = false;
                popupText.textContent = 'Missing input';
                popup.classList.remove('hidden');
            } else if (fuelType.value.length === 0) {
                valid = false;
                popupText.textContent = 'Must enter a fuel type';
                popup.classList.remove('hidden');
            }
            if (valid) {
                transaction.volume = Number(volume.value * 3.785412534257983);
                transaction.cost = Number(cost.value);
                transaction.productType = String(fuelType.value);
                popupText.textContent = 'Saving...';
                popup.classList.remove('hidden');
                api.call('Set', {typeName: 'FuelTransaction', entity: transaction},
                () => {
                    saveBtn.removeEventListener('click', validateFormData);
                    popup.classList.add('hidden');
                    editForm.classList.add('hidden');
                    downloadMenu.classList.remove('hidden');
                    getTransactionDetails();
                },
                err => {
                    popupText.textContent = 'Error saving transaction';
                    popup.classList.remove('hidden');
                    console.log(err)
                })
            }
        })
        
    })
}

Answer 1

如果需要识别按钮及其关联的数据集，可以使用 data 属性并在插入按钮时设置它。

<button data-transactionID="21">Text<Button>

然后在你的函数中，你可以检查相应的数据集有哪个id。将事件传递到函数中非常重要。

let id = event.target.dataset.transactionID