javascript - 带/参数多次调用JS函数

Question

我有一个 JS 函数可以编辑填充输入的值。

我通过 ID(该函数的参数)获取输入的值，并在单击时调用该函数。

我的问题是，当我单击编辑第一个输入时，它可以工作，但随后我想编辑第三个输入。它会编辑第一个和第三个输入吗？

如何重置我的函数以仅编辑第三个？

这是我的 JS 函数

function editTicket(id) {
let toEdit = id;
document.getElementById("inputRow" + toEdit).style.backgroundColor = "#6C63FF";
document.getElementById("inputRow" + toEdit).style.color = "#fff";
$("#imgtoCenter").click(function (e) {

    var offset = $("#imgtoCenter").offset();
    var relativeX = (e.pageX - offset.left);
    var relativeY = (e.pageY - offset.top);

    sessionStorage.removeItem('x' + toEdit);
    sessionStorage.removeItem('y' + toEdit);
    document.getElementById("inputRow" + toEdit).style.backgroundColor = "#fff";
    document.getElementById("inputRow" + toEdit).style.color = "#000";
    sessionStorage.setItem('x' + toEdit, Math.round(relativeX));
    sessionStorage.setItem('y' + toEdit, Math.round(relativeY));
    document.getElementById("x" + toEdit).value = sessionStorage.getItem('x' + toEdit);
    document.getElementById("y" + toEdit).value = sessionStorage.getItem('y' + toEdit);
});

}

如果我console.log(id)，我就得到了最后一次点击和新一次点击的值。

谢谢..!

Answer 1

来自jQuery click documentation

Additional Notes: As the .click() method is just a shorthand for .on( "click", handler ), detaching >is possible using .off( "click" ).

每次调用 editTicket 方法时，都会在 #imgtoCenter 元素上附加一个点击事件。所有这些点击事件都会累积在元素上，当您点击 #imgtoCenter 时，所有处理程序都会使用它们保留的先前 ID 来触发。

只需在 editTicket 方法末尾处添加 $("#imgtoCenter").off('click') 即可。