@efimenko_b

Почему так странно ведут себя события после ajax запроса?

В общем, говорю сразу, скорее всего это я напортачил или просто не до конца понимаю как все работает.
Есть на сайте кнопка входа, по нажатию на которую появляется окошко с формой:
Вот сама форма:
<form class="form-horizontal" method="post" id="authajax">
					<div class="form-group">
						<div class="col-lg-12">
							<input type="text" class="form-control" name="login" placeholder="Логин">
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-12">
							<input type="password" class="form-control form-control-bottom" name="password" placeholder="Пароль">
							<p class="input-error text-danger">Неверный логин или пароль</p>
							<div class="checkbox">
								<label>
									<input type="checkbox"> Запомнить меня
								</label>
							</div>
							<button type="submit" class="btn btn-primary btn-right">Отправить</button>
						</div>
					</div>
				</form>


Это обработка нажатия кнопки для появления формы:
$('#auth-a').click(function(e){
e.preventDefault();
		if (!$(this).siblings('form').hasClass('open')) {
			$(this).siblings('form').fadeIn().addClass('open');
		}
		else{
			$(this).siblings('form').fadeOut().removeClass('open');
		}
	});


А это ajax обработка этой формы:
$("#authajax").submit(function(){
		var form = $(this),
		error = false,
		subW = form.find('button[type="submit"]').width(),
		subH = form.find('button[type="submit"]').height();

		form.find('input').each( function(){
			if ($(this).val() == '') {
				$(this).css('border', '1px solid #d9534f');
				form.find('.input-error').text('Заполните все поля').fadeIn();
				error = true;
			}
			else if($(this).val() != ''){
				$(this).css('border', '0');
			}
		});
		if (!error) {
			form.find('input').each( function(){
				$(this).css('border', '0');
			});
			var data = form.serialize();
			$.ajax({
				type: 'POST',
				url: 'proverka.php',
				dataType: 'json',
				data: data,
				beforeSend: function(data){
					form.find('button[type="submit"]').width(subW).height(subH).html('<i class="fa fa-spinner fa-spin"></i>');
				},
				success: function(data){
					if (data['error']){
						form.find('.input-error').text('Неверный логин или пароль').fadeIn();
					}
					else{
						form.fadeOut();
						$('#auth').prepend(data['message']);
						$('#auth-a').remove();
					}
				},
				complete: function(data){
					form.find('button[type="submit"]').width('').height('').html('Отправить');
				}         
			});
		}
		return false;
	});


Обработчик скидывать не буду, там все стандартно.
Все отлично работает, я захожу на акк без перезагрузки, но потом, если на нажму на кнопку выхода, которая добавляется вот здесь $('#auth').prepend(data['message']); (в data['message'] лежит обычная строка Добро пожаловать, '.$_SESSION['login'] . ') код js не срабатывает, выход с акка не происходит, хотя вот ивент на нажатие кнопки выхода:
$('#sign-out').click(function(e){
		$.ajax({
			type: 'POST',
			url: 'exit.php',
			dataType: 'json',
			success: function(data){
				if (!data['error']){
				$('#auth>p:first-child').remove();
				$('#auth').prepend('<a href="#" id="auth-a">Вход <i class="fa fa-plug"></i></a>');
				}
			}
		});
		return false;
	});

Почему не работает, я не понимаю, но самое интересное, что если я обновлю страницу, то выход сработает, но потом не будет работать событие по нажатию на кнопку входа, форма не будет появляться.

Помогите пожалуйста, подскажите где я напортачил, что не так понял?
Заранее спасибо!
  • Вопрос задан
  • 415 просмотров
Решения вопроса 2
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Заменяйте
$('#auth-a').click(function(e){...});
на
$(document).on('click', '#auth-a', function(e){...});
Ответ написан
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Кнопка #sign-out создаётся динамически? Тогда обработчик на неё должен вешаться после создания кнопки. Или должен быть обработчик на статическом родителе этой кнопки, $('#auth').on('click', '#sign-out', function(){...});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
SagePtr
@SagePtr
Еда - это святое
А почему у события отправки формы нет preventDefault?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы