Question

基本上，当用户想要添加打印机或编辑当前打印机时，此功能会打开一个模态。打印机摆放在具有各种特性的桌子中。

openmodal函数的row参数是触发事件的行。但是，当我尝试访问我的edit eventListener中的这一行时，当该人选择编辑一行时会触发该行，它只会访问已编辑的第一行。

如何在eventListener中使用正确的行？

function openmodal(option, row) {
    backdropModal.style.display = "block";
    modal.style.display = "block";
    if (option === 'add-new') {
        edit.style.display = 'none';
    }
    edit.addEventListener('click', function (event) {
        var editedPrinter = new Printer(
            document.getElementById('post-brand-input').value,
            document.getElementById('post-type-input').value,
            document.getElementById('post-code-input').value,
            document.getElementById('post-color-input').value,
            document.getElementById('post-quantity-input').value,
            document.getElementById('post-updated-input').value,
            document.getElementById('post-name-input').value,
            document.getElementById('post-location-input').value,
            document.getElementById('post-notes-input').value,
            document.getElementById('post-min-quantity-warning').value
        );


        while (row.firstChild) {
            row.removeChild(row.firstChild);
        }

        addPrinter(row, editedPrinter);
        event.stopImmediatePropagation();
    });
    addNew.addEventListener('click', addNewPrinter);
}

Answer 1

您不应在openmodal内添加事件侦听器。每次打开模态时，它都会向元素添加一个新的侦听器，但旧的侦听器仍然存在，因此它们都会运行。

您应该只添加一次侦听器。 openmodal()可以设置一个全局变量，告诉监听器选择了哪一行。

var selectedRow;

function openmodal(option, row) {
    backdropModal.style.display = "block";
    modal.style.display = "block";
    if (option === 'add-new') {
        edit.style.display = 'none';
    }
    selectedRow = row;
}

edit.addEventListener('click', function (event) {
    var editedPrinter = new Printer(
        document.getElementById('post-brand-input').value,
        document.getElementById('post-type-input').value,
        document.getElementById('post-code-input').value,
        document.getElementById('post-color-input').value,
        document.getElementById('post-quantity-input').value,
        document.getElementById('post-updated-input').value,
        document.getElementById('post-name-input').value,
        document.getElementById('post-location-input').value,
        document.getElementById('post-notes-input').value,
        document.getElementById('post-min-quantity-warning').value
    );

    while (selectedRow.firstChild) {
        selectedRow.removeChild(selectedRow.firstChild);
    }

    addPrinter(selectedRow, editedPrinter);
    event.stopImmediatePropagation();
});
addNew.addEventListener('click', addNewPrinter);

Answer 2

也许你想这样做：

addNew.addEventListener('click', function(evtObj){
  addNewPrinter.call(this, evtObj, argument1, argument2);
});

如何使用eventListener中父函数的参数？

2 个答案: