Событие click срабатывает несколько раз, как?

У меня есть кнопка. когда я нажимаю на него, я добавляю некоторые кнопки в 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

Сделайте это

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

Ответ 2

Попробуйте указать всем кнопкам уникальный идентификатор.

Ответ 3

Попробуйте установить on в документе, который должен это сделать, и будет связывать только один раз, включая будущие (сгенерированные) элементы. Например:

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

Дело в том, что вы сохраняете привязку к событию клика с помощью функции key(). Поскольку вы привязываете событие on к документу, вам не нужно обертывать его в функцию. Привязка, подобная этому (мой код выше), скажет jQuery, чтобы связать действие (в моем случае "//do stuff" ) с каждым событием click на "#key li", которое оно находит в документе. Уэтер это есть или нет, там есть один или их много. Надеюсь, это несколько объясняет это.

Fiddle

В моей скрипке я немного изменил ваш другой код и предварительно обмотал вставленные кнопки как объект jQuery, поэтому вы не только добавляете кнопку, но уже настроили на нее действия.