javascript - 为什么我的函数要附加到它之前附加到的所有元素上？

Question

我有以下代码:

// Show a popup box and return the value
function showPopup(callback) {
    $('.modal').show();
    $('.save').on('click', () => {
        $('.modal').hide();
        callback($('input').val());
    });
}

// Add a new option to a select element
function addToDropdown(dropdownSelector) {
    showPopup((newValue) => {
        $(dropdownSelector).append(
            `<option value=${newValue}>${newValue}</option>`
        );
    });
}

$('#btn1').on('click', () => {
    addToDropdown('#select1');
});

$('#btn2').on('click', () => {
    addToDropdown('#select2');
});

当我单击 #btn1 并输入新值时，该值将添加到 #select1 中。

然后我单击#btn2并输入一个新值，它将添加到#select1和#select2中。

然后，如果我单击 #btn1 并输入新值，则会将其添加到 #select1 两次和 #select2。

为什么会发生这种情况？就像过去每次调用该函数时都会调用该函数一样。

Answer 1

$('.save').on('click', () => {

每次调用showPopup(callback)时添加点击事件。

您可以取消绑定(bind)之前的点击事件(如果有)并附加它，如下所示:

function showPopup(callback) {
    $('.modal').show();
    $('.save').unbind( "click" );
    $('.save').bind('click', () => {
        $('.modal').hide();
        callback($('input').val());
    });
}

您可以使用的另一个想法(不是很好，但快速简单)是您可以替换下拉列表中的 html，而不是附加:

function addToDropdown(dropdownSelector) {
  showPopup((newValue) => {
    $(dropdownSelector).html( $(dropdownSelector).html() + `<option value=${newValue}>${newValue}</option>` );
  });
}