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

我有一个按钮。 当我点击它时，我将一些按钮附加到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 = 'click
placeholder
'; $('body').append(html); key(); }); $(document).on('click', '.cont', function () { var html = '
123
'; $('.container').html(html); }); function key() { $(document).on('click', '#but_placeholder button', function () { $('input').val($('input').val() + $(this).html()); }); } 

   test 

要重现，请单击test按钮，然后click ，然后click 1 2 3并重复此过程

您会注意到，第二次完成该过程后，文本会翻倍

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

Answer 2

尝试给所有按钮一个唯一的ID。

Answer 3

尝试在文档on设置，应该这样做，并且只绑定一次，包括将来（生成的）元素。 例如：

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

关键是，使用key（）函数继续重新绑定到click事件。 在将on事件绑定到文档时，不需要将其包装在函数中。 像这样的绑定（我上面的代码）将告诉jQuery将动作（在我的情况下’// do stuff’）绑定到它在文档中找到的’#key li’上的每个click事件。 它是否在那里，有一个或有很多。 我希望这有点解释。

小提琴

在我的小提琴中，我稍微修改了你的其他代码，并将插入的按钮预先包装为jQuery对象，这样你不仅可以附加一个按钮，而且还可以在其上设置操作。