Первоначально у меня была проблема, что событие click срабатывало несколько раз, но мне удалось преодолеть это с вероятным чрезмерным использованием unbind() и one(), как вы увидите в моем коде ниже!
У меня есть некоторый код, который открывает универсально используемое модальное окно, которое я использую для различных вещей, включая, в некоторых случаях, форму пароля.
Я не думаю, что вам нужен HTML, поэтому я не буду его публиковать.
Когда кнопка или действие вызывает необходимость в окне, я вызываю функцию следующим образом:
showModalAlert(type, theWidth, theHeight, title, html, confirmThis, denyThis)
Первые три переменные определяют, как будет выглядеть окно, title и html определяют содержимое, а confirmThis и denyThis - функции, устанавливаемые непосредственно перед вызовом этой функции, и определяют, каким должно быть действие, если это является окном confirm и кнопки confirm или deny нажимаются.
В случае окна security кнопка подтверждения заменяется кнопкой «подписать», которая отправляет простую форму пароля и возвращает идентификатор пользователя из базы данных. Если идентификатор пользователя успешно возвращен, скрипт программно нажимает кнопку confirm и, в свою очередь, запускает свою функцию согласно вызову начального открытия модального окна.
Моя проблема заключается в том, что если введен неправильный пароль или пользователь отменяет окно, а затем, не обновляя окно браузера, повторно вводит пароль правильно, функция confirmThis() выполняется дважды (или столько раз, сколько было выполнено неверного пароля / действия по отмене).
Итак, ясно, что он «запоминает» функцию confirmThis каждый раз.
Как я уже сказал, изначально функция успешного ввода пароля дважды нажимала confirmIt, обильное использование one() исправило это, теперь она определенно только нажимает confirmIt один раз, но все еще выполняет функцию несколько раз .
Как я могу очистить эту функцию и убедиться, что она выполняется только один раз?
Функция, из которой я вызываю модальное окно, выглядит следующим образом:
$('#saveDelivery').click(function () {
function confirmIt() {
formData = (JSON.stringify($('#delDetail').serializeObject()));
saveData(formData);
$('#saveDelivery').removeClass('centreLoader');
};
showModalAlert('security', '300px', '185px', 'Security!', 'You need to "Sign" this action.', confirmIt, '');
});
Это просто щелчок по элементу saveDelivery, функция confirmThis объявляется в этот момент и отправляет форму AJAX
фактическая showModalAlert функция ниже:
function showModalAlert(type, theWidth, theHeight, title, html, confirmThis, denyThis) {
// stuff that opens the alert window \\
if (confirmThis == '') {
$('#confirmIt').one('click', function () { $('#closeAlert').one('click').click(); });
} else {
$('#confirmIt').one('click', function () { confirmThis(); $('#closeAlert').one('click').click(); });
};
if (denyThis == '') {
$('#denyIt').one('click', function () { $('#closeAlert').one('click').click(); $('#signIt').unbind(); });
} else {
$('#denyIt').one('click', function () { denyThis(); $('#closeAlert').one('click').click(); $('#signIt').unbind(); });
};
if (type == "confirm") {
$('.closeAlert, .signItForm').hide();
};
if (type == "alert") {
$('.alertConfirm, .signItForm').hide();
};
if (type == "fixedAlert") {
$('.closeAlert, .alertConfirm, .signItForm').hide();
};
if (type == "security") {
$('.signItForm').show();
$('.closeAlert').hide();
$('#confirmIt').hide();
$('#signIt').unbind().fadeTo('fast',1);
};
};
$('#signIt').live('click', function () {
var formData = (JSON.stringify($('.secureSign').serializeObject()));
var signitPwd = $('#signItpwd').val();
var jsonURL = "/jsonout/getdata.aspx?sql=SELECT id, password FROM users WHERE password ='" + signitPwd + "' LIMIT 1&output=json&usedb=new&labelName=any&fileName=";
$.getJSON(jsonURL, function (data) {
if (data.length > 0) {
$('.savingUserID').val(data[0].id);
$('#confirmIt').one('click').click();
$('#signIt').fadeTo('fast', 0);
$('#confirmIt').show();
} else {
$('#signIt').fadeTo('fast', 0);
$('#confirmIt').one('click').show();
$('.closeAlert').show();
$('.alertConfirm, .signItForm').hide();
$('#alertTitle').html("Error!");
$('#alertContent').css({ 'text-align': 'center' }).html("Password Denied");
};
});
});