XanderBass
@XanderBass
Творец

Кнопки формы не работают при загрузке через AJAX?

Доброго всем здравия!

Суть: через 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;


Оно отвечает за закрытие блока по клику вне формы. Как лучше сделать этот обработчик?
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы