Событие отправки jquery .on ()

101

У меня проблема с .on(). У меня есть несколько элементов формы (формы с class="remember"), также я добавляю еще один form.rememberс помощью AJAX. Итак, я хочу, чтобы он обрабатывал событие отправки примерно так:

$('form.remember').on('submit',function(){...})

но форма, добавленная с помощью AJAX, с ним не работает.

В чем проблема? Это ошибка?

jquery ajax forms submit Антон Абрамов
источник
10
Попробуйте$(document).on('submit','form.remember',function(){...})
Серхио
1
@Sergio заменить documentближайшим статическим родителем.
Марк Байдженс

Ответы:

220

Вам нужно делегировать событие на уровень документа

$(document).on('submit','form.remember',function(){
   // code
});

$('form.remember').on('submit'работать так же, как и $('form.remember').submit(при использовании, $(document).on('submit','form.remember'тогда он также будет работать для DOM, добавленного позже.

Дипеш Пармар
источник
24
Также имейте в виду, что он $(document).onимеет гораздо более низкую производительность, чем $('form.remember').on('submit'. Теперь он должен прослушивать все события отправки в документе. Гораздо лучше немного сузить кругозор, чем слушать on document, если возможно,
Лиам
7
$ ('body'). on ('submit', 'form.remember', function () {// код}); решил мою проблему
Олотин Темитоп
Несмотря на то, что @Liam верен, $ (document) .on по-прежнему полезен для операций CRUD с элементами, отображаемыми ajax.
Нориэль Крус
38

У меня была проблема с теми же символами. В моем случае оказалось, что в моей функции отправки отсутствует оператор return.

Например:

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })
vitor_gaudencio_oliveira
источник
2
Обратите внимание, что return false;форма не будет отправлена. Для отправки формы используйте return true;.
Кай Ноак
0

Проблема здесь в том, что «on» применяется ко всем элементам, существующим ВРЕМЯ. Когда вы создаете элемент динамически, вам нужно снова запустить:

$('form').on('submit',doFormStuff);

createNewForm();

// re-attach to all forms
$('form').off('submit').on('submit',doFormStuff);

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

function bindItems(){
    $('form').off('submit').on('submit',doFormStuff); 
    $('button').off('click').on('click',doButtonStuff);
}

Итак, всякий раз, когда вы что-то создаете (обычно кнопки в моем случае), я просто вызываю bindItems, чтобы обновить все на странице.

createNewButton();
bindItems();

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

Даниал
источник