Почему не срабатывает Ajax?

Question

[Kooper_pro]

Есть форма авторизации

spoiler

<div class="auth_form">
	<div class="center_block">
		<div class="form_block">
			<form  id="login_form"  method="post" action="">
				<input name="login" type="text" class="input_txt"   placeholder="логин" required>
				<input type="password" name="pass" class="input_txt"  placeholder="пароль" required>
				<input type="submit" class="buttons" value="Войти" id="sends">
			</form>
		</div>
	</div>
</div>

получаем аяксом html код контента

spoiler

$('#login_form').submit(function(e){
    e.preventDefault();
    $.ajax({
      url: "include/login.php",
      type: "POST",
      dataType: "JSON",
      data: $('#login_form').serialize(),
      beforeSend: function(response) {
      	$("#wait").css("display","table");
      },
      success: function(response) {
       	if (response!='Error!#159') {
			$(".input_txt").val("");
			$(".auth_form").css("display","none");
			$( ".admin_panel" ).empty();
			$( ".admin_panel" ).append(response);
       	}else{
       		alert("Не верные данные входа!");
			$(".input_txt").val("");
       	}
       	
      },
      error: function(response) {
        //обработка ошибок при отправке
     },
     complete: function(response) {
      	$("#wait").css("display","none");
      }
    });
});

Код приходит вставляется в блок.
Уже в полученном html ответе есть форма, по которой отправляем данные на сервер с файлом:

spoiler

<form enctype="multipart/form-data" method="post" id="data_type" class="genform">
	<label class="label_st">Укажите данные</label></br>
	<input name="type_data_text" class="text_st" required placeholder="Данные" type="text">
	<input type="hidden" name="data_text_id" value="type_1">
	<input type="file" name="file_type" id="file_data" class="inputfile" required accept="image/*">
	<label for="file_data" id="lab1">Выберите файл...</label>
	<input type="submit" class="button_st" value="Добавить" id="but1">
</form>

Скрипт отправляет данные на сервер, там данные записываются в бд и формируется новый запрос, ввиде массивов с html кодом, где ключ это класс блока в который нужно вставить данные.

spoiler

$('.genform').submit(function(e){
	e.preventDefault();
	var $that = $(this),
	formData = new FormData($that.get(0)); 
	
	$.ajax({
		url: "include/login.php",
		type: "POST",
		dataType: "JSON",
		processData: false,
		contentType: false,
		data: formData,
		beforeSend: function(response) {
			$("#wait").css("display","table");
		},
		success: function(response) {
			for (key in response){
				$("div").each(function(i) {
					if ($(this).hasClass(key)) {
						$( this).empty();
						$( this).append(response[key]);  

					}
				});	
      			}
      		},
		error: function(jqXHR, exception) {
			console.log(jqXHR) ; 
		},
		complete: function(response) {
			$("#wait").css("display","none");
		}
		});
	$(this)[0].reset();
	$("#lab1").text("Выберите файл...");
});

Только вот почему то запрос с файлов не отправляется, вместо этого обновляется страница и ничего не происходит, база данных пуста.
А вот если html ответ от формы с авторизации не получать с сервера, а изначально вставить. То все гуд работает? В чем тонкость?

Comments

[Yustas Alexu]

Уже давно считается дурным тоном гонять html через аякс. Данные должны приходить в виде JSON, на худой конец в виде XML. Это избавит от таких вот проблем как в этом вопросе.

Answer 1

[Евгений]

$('html').on('submit', '.genform', function(e){
        // обработчик
    });

так вроде должно работать. проблема в том, что у вас вторая форма - динамический элемент

Answer 2

[leni_m]

Скорее всего при загрузке браузером вашего скрипта js на странице еще нет .genform и браузер такой типа: "Тут че в скрипте написано вообще? Какой-то элемент с классом genform, которого нету на странице, а от меня чего-то хотят. Пойду-ка лучше я дальше и не буду эту муть даже обрабатывать".
Но благо существует конструкция $(selector).on(event, более точный selector, function () {...}). И например в таком случае

$('body').on('submit', '.genform', function (){...})

Браузер скажет : "Опа! body есть - знач все в поряде. Повесим этот обработчик, а есть этот genform или нет - меня уже не волнует".