Добавьте обработчик OnClick с jQuery только один раз - даже если он снова вызван

Если я дважды назначу обработчик события OnClick элемента, обработчик будет выполнен дважды. Но я хочу изменить это так, даже если я назначу его дважды, обработчик выполнит только один раз.

Бесспорный пример для демонстрации проблемы:

$('.button').click(
    function(){
       alert('here');
});
$('.button').click(
    function(){
       alert('here');
});

Итак, я добавил обработчик дважды. Теперь, когда я нажимаю элемент с этим классом, я получаю два окна предупреждения.

Вопрос в том, как я могу его ограничить, поэтому я бы получил только одно окно оповещения?

Ответы

Ответ 1

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

var myEventHandler = function () {alert('hello')};
$('a').unbind('click', myEventHandler);
$('a').bind('click', myEventHandler);

Должен работать.

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

http://api.jquery.com/on/

Ответ 2

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

Смотрите jsfiddle:

<div id="container">
 <p>Paragraph #1</p>
</div>

<div>
 <button id="add">Add Elements</button>
</div>

<script type="text/javascript">
 var n = 1;
 $('#add').click(function() {
   $('#container').append('<p>Paragraph #' + ++n + '</p>');
 });
 $('#container').on('click', 'P', function() {
   alert($(this).text());
 });
</script>

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

Ответ 3

небольшой трюк, который может помочь:

jQuery(".button:not(.clickadded)").click(function(){

     alert('here');

).addClass("clickadded");

Ответ 4

Используйте один. http://api.jquery.com/one/

$( ".button" ).one( 'click', function(){
    alert( '....' )
});

Ответ 5

Вы также можете удалить любые существующие события щелчка в функции с выключенной функцией ('click'):

$('.button').off('click').click(function() {
    ...
});

Ответ 6

Я решил его с помощью флага, я знаю, что это не лучшая идея только

if (!alreadyBound) {
     $('.button').bind('click', submitEvtHandler);
     alreadyBound = true;
}

Ответ 7

Вот метод, который я использую, подобно методу Miquel в некотором роде.

$.prototype.once = function() {
    var ret = this.not(function() {
        return this.once;
    });
    this.each(function(id, el) {
        el.once = true;
    });
    return ret;
};

Используйте его так:

$('#footer')
    .once()
    .click(function(){
        console.log('click the footer');
    });

Один раз также поддерживает параметр, чтобы вы могли иметь разные типы

Ответ 8

Я думаю, что нет смысла добавлять функцию дважды. Однако, если вам нужно, вы можете добавить return false к одной из функций.

$('.button').click(
    function(){
       return false;
       alert('here');
});
$('.button').click(
    function(){
       alert('here');
});