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）时都会添加click事件。

您可以取消绑定上一个点击事件（如果有）并将其附加，如下所示：

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>` );
  });
}

为什么我的函数会附加到以前附加的所有元素上？

1 个答案: