При отправке формы аяксом сначала приходит одно сообщение если, если еще раз отправить форму то 3 сообщения и с каждым отправление число отправленных сообщений увеличивается. Вот весь код.Подскажите пожалуйста в чём может быть проблема?
$(document).ready(function() {
for (var i = 0; i < $("#callbackOkModal").find("button").length; i++) { //закрытие окна
$("#callbackOkModal")
.find("button")
[i].addEventListener("click", function() {
$("#callbackOkModal").fadeOut("fast");
$("#callbackOkModal").removeClass("in");
$(".modal-backdrop").remove();
});
}
var ShowPopUp = $(".btn-popup");//получение всех кнопок открытия форм
for (var i = 0; i < ShowPopUp.length; i++)
ShowPopUp[i].addEventListener("click", function() {
var NameShowForm = $(this).attr("data-popup-name");забираю какую форму открыть
var IdShowForm = $("#" + NameShowForm);
$(IdShowForm).before('<div class="modal-backdrop fade in">');
$(IdShowForm).fadeIn("fast");
$(IdShowForm).addClass("in");
$(IdShowForm)[0].addEventListener("click", function(e) {//закрытие формы вне попапа
var container = $(this);
if (container.has(e.target).length === 0) {
$(IdShowForm).fadeOut("fast");
$(IdShowForm).removeClass("in");
$(IdShowForm)
.prev()
.closest(".modal-backdrop")
.remove();
}
});
ClosePopUp(IdShowForm.find(".close")[0], $(IdShowForm));//закрытие на элемент
Send(IdShowForm);
});
function Send(elem) {//отправка формы
elem.find(".btn-send")[0].addEventListener("click", function() {
elem.find("form").submit(function() {
var form = $(this);
var error = false;
form.find("input").each(function() {
if ($(this).val() == "") {
$(this).addClass("has-error");
$(this)
.next()
.text("");
$(this)
.next()
.append(document.createTextNode("Поле не может быть пустым"));
error = true;
} else {
$(this)
.next()
.text("");
$(this).removeClass("has-error");
}
});
if (!error) {
var form_data = $(this).serialize();
$.ajax({
type: "POST",
dataType: "html",
url: "http://flyart.byhelp.by/wp-content/themes/flyart/send.php",
data: form_data,
success: function(data, xhr) {
ShowFormSucess($("#callbackOkModal"));
elem.fadeOut("fast");
elem.removeClass("in");
form.trigger("reset");
},
beforeSend: function(data) {
elem.find(".btn-send").attr("disabled", "disabled");
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(xhr.status);
console.log(thrownError);
},
complete: function(data) {
elem.find(".btn-send").prop("disabled", false);
}
});
}
return false;
});
});
} function ShowFormSucess(form) {//показ формы при успешной отправке
form.fadeIn("fast");
form.addClass("in");
} function ClosePopUp(elem, form) {
elem.addEventListener("click", function() {
form.fadeOut("fast");
form.removeClass("in");
form
.prev()
.closest(".modal-backdrop")
.remove();
});
}});
Дело в том, что когда через addEventListener добавляешь обработчик после того, как ранее его уже добавлял, он не перезаписывается, а добавляется. Таким образом с каждым разом на одно событие одинаковых обработчиков становится все больше.
Попробуй использовать метод removeEventListener перед тем, как добавить обработчик.
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости