Jquery .on () подати подію

98

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

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

але форма, додана за допомогою AJAX, не працює з нею.

Де проблема? Це помилка?

— Антон Абрамов
джерело

9

Спробуйте$(document).on('submit','form.remember',function(){...})

— Серхіо

1

@Sergio замінити documentнайближчим статичним батьком.

— Mark Baijens

217

Вам потрібно делегувати подію на рівень документа

$(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 () {// code}); вирішив мою проблему

— Olotin Temitope

Незважаючи на те, що @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

Проблема тут полягає в тому, що "увімкнено" застосовується до всіх елементів, що існують НА ЧАС. Коли ви створюєте елемент динамічно, вам потрібно знову запустити:

$('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();

Мені не подобається використовувати "тіло" або елементи документа, оскільки за допомогою вкладок та модалів вони, як правило, зависають і роблять те, чого ви не очікуєте. Я завжди намагаюся бути якомога конкретнішим, якщо це не простий 1-сторінковий проект.

— Даніял
джерело