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?

jquery ajax forms submit 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

Odpowiedzi:

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