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

Question

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

我的问题是，那些我添加的按钮会触发多次。

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

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

第一次调用key()时，console.log只会触发一次

第二次调用key()时，console.log会触发两次

以此类推

我尝试添加$(document).find('#key li').unbind('click')，但似乎没有起作用

有什么想法吗？

编辑：

这里是一个jsfiddle示例（如下所示）。

$('button').on('click', function () {
    $('.cont').remove();
    $('.container').remove();
    var html = '<button class="cont">click</button><div class="container">placeholder</div>';
    $('body').append(html);
    key();
});

$(document).on('click', '.cont', function () {
    var html = '<div id="but_placeholder"><button class="one">1</button><button class="two">2</button><button class="three">3</button></div>';
    $('.container').html(html);
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input" />
<button>test</button>

要重现此情况，请单击“测试”按钮，然后单击“点击”，然后一个接一个地按顺序单击“1”、“2”、“3”，然后重复该过程。

您会注意到第二次执行此过程时，文本会增加一倍。

- Patrioticcow

---

你尝试过使用keyup()而不是click()吗？ - Enijar

我遇到了同样的问题，然后我将.on更改为.bind，问题就解决了。 - Kiril Belah

每次点击“el”时为什么要向文档添加一个新的事件处理程序？ - adeneo

用户adeneo已经回答了你的问题。如何解决？删除函数key()并放入console.log()。但这很可能不是你想要的。为什么不分享更多的代码并解释你想要实现什么？ - Anto Jurković

我编辑了我的问题并添加了一个例子。 - Patrioticcow

Answer 1

执行这个操作

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

- Harsha Venkatram

---

这个解决方案将取消绑定我的第一个 $(el).on('click' ...。 - Patrioticcow

似乎没有效果。 - Patrioticcow

你的意思是点击事件仍然被多次触发？ - Harsha Venkataramu

@Patrioticcow：尝试第二种方法。正如Adeneo建议的那样，避免将点击绑定到文档“n”次。 - Harsha Venkataramu

你最后的编辑对我的脚本进行了一些更改，$(this) 不是元素，而是文档。我必须使用 $(document)，否则无法获取元素。 - Patrioticcow

Answer 2

尝试为所有按钮赋予唯一的id。

- veelen

---

这是否意味着您具有相同ID的多个元素？ - veelen

Answer 3

尝试在文档上设置on，这样就可以了，而且只会绑定一次，包括未来（生成的）元素。例如：

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

重点是，您使用key()函数不断重新绑定到单击事件。由于您将on事件绑定到文档上，因此无需将其包装在函数中。像这样绑定（我的代码如上所示）将告诉jQuery将操作（在我的情况下为'//do stuff'）绑定到文档中找到的'#key li'上的每个单击事件。无论它是否存在，无论有一个还是有多个。我希望这解释了一些。

Fiddle

在我的fiddle中，我对您的其他代码进行了修改，并将插入的按钮预先包装为jQuery对象，因此您不仅可以附加按钮，而且已经设置了其上的操作。

- Klaas Leussink

---

当然。我在解释您的代码时遇到了一些麻烦（如果您选择（并设置）ID，则可以使事情更清晰）。 我认为这是您所需的：http://jsfiddle.net/c_kick/3LRBX/ - Klaas Leussink