Обязательные проблемы
Обычно в jQuery, когда вы связываете элемент HTML с каким-либо событием, это событие вызывается каждый раз, когда пользователь (клиент) запускает его. Таким образом, когда у вас есть событие нажатия кнопки, вы можете щелкнуть по нему столько раз, сколько захотите. В некоторых редких случаях это может быть сложно. Давайте представим следующий сценарий.
- Пользователь нажимает кнопку «голосовать».
- Некоторые вызовы AJAX выполняются.
- После успешного вызова AJAX вы устанавливаете cookie, чтобы отклонить дальнейшие голоса с этого компьютера.
Похоже, это довольно известный сценарий, но поскольку событие нажатия кнопки прикреплено к кнопке, достаточно времени, чтобы несколько раз нажать кнопку «голосовать» и проголосовать несколько раз. В этом случае перед установкой файла cookie пользователь может проголосовать более одного раза.
демонстрация
Поэтому одно из возможных решений — отменить привязку события 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 } }); }); } });