Javascript 点击事件多次触发问题，如何解决？

我有一个钮扣。当我点击它时，我会在DOM中添加一些按钮

我遇到的问题是，我多次添加的按钮会着火

$(el).on('click', function (e) {
    key();
});

function key() {
    $(document).on('click', '#key li', function () {
        console.log($(this));
    });
}

第一次调用

key（）

第二次调用
key（）
时，
console.log
会触发两次

等等

我尝试添加
$（文档）。查找（'key li'）。取消绑定（'click'）
，但这似乎不起作用

有什么想法吗

编辑：

下面是一个示例（如下所示）


$（'button'）。在（'click'，函数（）{
$（'.cont'）.remove（）；
$（'.container'）.remove（）；
var html='clickplaceholder'；
$（'body'）.append（html）；
键（）；
});
$（文档）.on（'单击'，'.cont'，函数（）{
var html='123'；
$（'.container'）.html（html）；
});
函数键（）{
$（文档）。在（'单击'，'但是#占位符按钮'）上，函数（）{
$（'input'）.val（$（'input'）.val（）+$（this.html（））；
});
}

测试
尝试为所有按钮提供唯一的id。
执行此操作

function key() {
    $('#key li').unbind('click');
    $('#key li').bind('click', function () {
        console.log($(this));
    });
}

或者你也可以

function key() {
    $('#key').find('li').unbind('click');
    $('#key').find('li').bind('click', function () {
        console.log($(this));
    });
}

我想第二个肯定会有用

更新方法

function key() {
    $(document).off('click', '#but_placeholder button');
    $(document).on('click', '#but_placeholder button', function () {
        $('input').val($('input').val() + $(this).html());
    });
}

尝试在文档上设置

上的，这应该可以做到，并且只绑定一次，包括将来（生成的）元素。例如：

$(document).on('click', '#key li', function() {
    //do stuff
});

关键是，使用key（）函数不断重新绑定到click事件。当您将

on

事件绑定到文档时，不需要将其包装到函数中。像这样的绑定（我上面的代码）将告诉jQuery将操作（在我的例子中是“//do stuff”）绑定到它在文档中找到的“#key li”上的每个单击事件。它是否存在，是否存在一个或多个。我希望这能解释一下

---

在我的提琴中，我对您的其他代码进行了一些修改，并将插入的按钮预包装为jQuery对象，这样您不仅可以附加按钮，还可以在按钮上设置操作。

您是否尝试过使用keyup（）而不是click（）？我遇到了同样的问题，然后我将.on改为.bind，问题已经解决。为什么每次单击

el

，都要向文档中添加新的事件处理程序？用户adeneo已经回答了您的问题。如何修复它？删除函数键（）并放入console.log（）。但这（很可能）不是你想要的。你为什么不多分享一些代码并解释一下你想要实现的目标呢？我编辑了我的问题并添加了一个示例此解决方案将解除我的第一个

$（el）的绑定。on（'click'…

似乎没有效果。你的意思是单击仍会被触发多次吗？@Patrioticcow：尝试第二种方法。正如Adeneo所建议的，避免将单击绑定到文档“n”次上次编辑会稍微更改我的脚本，

$（此）

不是元素，而是文档。我必须使用

$（文档）

，否则我无法获取元素这是否意味着您有多个具有相同id的元素？当然。我在解释您的代码时遇到了一些问题（您可以通过选择（并设置）id使事情更清楚）。我想这就是您需要的：