时间戳

首页 > 解决方案 > 为什么我的函数会附加到它之前附加的所有元素？

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

问题描述

我有以下代码：

// 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并输入一个新值，它被添加到#select1and #select2。

然后，如果我单击#btn1并输入一个新值，它将被添加到#select1两次和#select2.

为什么会这样？就像过去每次调用函数时都会调用该函数。

标签： javascriptjquery

解决方案

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

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

您可以取消绑定先前的单击事件（如果有）并附加它，如下所示：

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

推荐阅读