Jquery .on () przesłać zdarzenie

100

Mam problem z .on(). Mam wiele elementów formularza (z formularzami class="remember"), a także dodaję inny form.rememberza pomocą AJAX. Tak więc chcę, aby obsługiwał takie zdarzenie, jak:

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

ale formularz dodany za pomocą AJAX nie działa z nim.

Gdzie jest problem? Czy to błąd?

— Anton Abramov
źródło

10

Spróbuj$(document).on('submit','form.remember',function(){...})

— Sergio

1

@Sergio zastąp documentnajbliższym statycznym rodzicem.

— Mark Baijens

219

Musisz delegować zdarzenie na poziom dokumentu

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

$('form.remember').on('submit'działa tak samo, jak, $('form.remember').submit(ale kiedy używasz $(document).on('submit','form.remember', będzie działać również dla DOM dodanego później.

— Dipesh Parmar
źródło

24

Pamiętaj również, że $(document).onma znacznie niższą wydajność niż $('form.remember').on('submit'. Teraz musi nasłuchiwać wszystkich zdarzeń przesyłania w dokumencie. O wiele lepiej jest trochę ograniczyć zakres niż słuchać on document, jeśli to możliwe

— Liam

7

$ ('body'). on ('wyślij', 'form.remember', function () {// kod}); rozwiązał mój problem

— Olotin Temitope

Mimo że @Liam jest poprawne, $ (document) .on jest nadal przydatne w operacjach CRUD na elementach renderowanych przez ajax.

— Norielle Cruz

38

Miałem problem z tymi samymi objawami. W moim przypadku okazało się, że w funkcji przesyłania brakuje instrukcji „return”.

Na przykład:

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })

— vitor_gaudencio_oliveira
źródło

2

Pamiętaj, że return false;nie spowoduje to przesłania formularza. Do przesłania formularza użyj return true;.

— Kai Noack

0

Problem polega na tym, że „włączone” jest stosowane do wszystkich elementów, które istnieją W CZASIE. Gdy tworzysz element dynamicznie, musisz ponownie uruchomić on:

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

createNewForm();

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

Ponieważ formularze zwykle mają nazwy lub identyfikatory, możesz również dołączyć je do nowego formularza. Jeśli tworzę dużo dynamicznych rzeczy, dołączę funkcję setup lub bind:

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

Więc za każdym razem, gdy coś tworzysz (zwykle przyciski w moim przypadku), po prostu wywołuję bindItems, aby zaktualizować wszystko na stronie.

createNewButton();
bindItems();

Nie lubię używać elementów „body” lub document, ponieważ w przypadku zakładek i modali zwykle kręcą się i robią rzeczy, których się nie spodziewasz. Zawsze staram się być jak najbardziej konkretny, chyba że jest to prosty 1-stronicowy projekt.

— Danial
źródło