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

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