Доброго всем здравия!
Суть: через AJAX с сервера подгружается форма. По сути подгружается чистый HTML, содержащий только форму.
<form action="/pm/send/123" enctype="multipart/form-data" method="post" class="small pm-form">
<section>
<label class="fc-text">
<span class="title">Сообщение</span>
<textarea name="text" placeholder="Напишите Ваше сообщение"></textarea>
</label>
<label class="fc-images">
<span class="title">Фото</span>
<input type="file" name="attach">
</label>
</section>
<section class="buttons">
<button type="button" class="close">Закрыть</button>
<button type="submit" class="ok">Отправить</button>
</section>
</form>
Кнопка закрытия работает нормально. Не работает следующее:
1. Поле ввода файла. При нажатии на кнопку ничего не происходит (диалог выбора файла не открывается).
2. Кнопка отправки формы. На формы, подгружаемые через AJAX вешается обработчик стартовым JS:
$(function(){
$(document).on('submit', '.modal-wrapper form', function(){
// Здесь код, который заканчивается return false;
});
});
Что характерно, если повесить обработчик на клик по кнопке сабмита формы, где прописать
$(this).closest('form').submit()
Форма таки отправляется.
Чувствую, что упускаю что-то элементарное, но понять не могу. В чём может быть проблема?
UPD: выяснил кое-что любопытное. На один из слоёв-контейнеров вешался обработчик вида:
if (e.target === $(this)[0]) {
$(this).closest('.modal-wrapper').remove();
}
return false;
Оно отвечает за закрытие блока по клику вне формы. Как лучше сделать этот обработчик?