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

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>

要重现，请单击test按钮，然后单击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（） 函数重新绑定到点击事件。将 on 事件绑定到文档时，无需将其包装在函数中。像这样的绑定（我上面的代码）将告诉jQuery将动作（在我的例子中是'//do stuff'）绑定到它在文档中找到的'#key li'上的每个点击事件。不管它是否存在，无论是有一个还是有很多。我希望这能在一定程度上解释它。

小提琴

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