Статьи

jQuery.unbind ()

Октябрь 31, 2017

Обязательные проблемы

Обычно в jQuery, когда вы связываете элемент HTML с каким-либо событием, это событие вызывается каждый раз, когда пользователь (клиент) запускает его. Таким образом, когда у вас есть событие нажатия кнопки, вы можете щелкнуть по нему столько раз, сколько захотите. В некоторых редких случаях это может быть сложно. Давайте представим следующий сценарий.

  1. Пользователь нажимает кнопку «голосовать».
  2. Некоторые вызовы AJAX выполняются.
  3. После успешного вызова AJAX вы устанавливаете cookie, чтобы отклонить дальнейшие голоса с этого компьютера.

Похоже, это довольно известный сценарий, но поскольку событие нажатия кнопки прикреплено к кнопке, достаточно времени, чтобы несколько раз нажать кнопку «голосовать» и проголосовать несколько раз. В этом случае перед установкой файла cookie пользователь может проголосовать более одного раза.

jQuery JavaScript Library

демонстрация

Поэтому одно из возможных решений — отменить привязку события click. В терминах jQuery это делается…

$ .Unbind ()

С помощью этого метода вы можете просто отсоединить событие «click» или любое другое событие, прикрепленное к нужному элементу HTML. Итак, теперь в первом случае у нас было:

$(document).ready(function() {
    $('input').click(function() {
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!<br />');
               }    
        }); 
    }); 
});

Теперь вы можете заменить код выше:

$(document).ready(function() {
    $('input').click(function() {
        $('input').unbind();
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!<br />');
               }    
        }); 
    }); 
});

Как вы можете видеть на демонстрации здесь, теперь кнопка не может быть нажата более одного раза.

демонстрация

Cookies + unbind ()

Однако есть проблема. После перезагрузки страницы событие снова прикрепляется, поэтому пользователь может нажать на кнопку еще раз. Очевидное решение — объединить cookie и unbind (), как показано в следующем псевдокоде.

$(document).ready(function() {
    if (cookie is not set) { 
        $('input').click(function() {
            $('input').unbind();
            $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
                   , success : function() {
                        $('p').append('You\'ve voted successfully!<br />');
                        set cookie
                   }    
            }); 
        });
    } 
});

28
Share: