Jquery .on () Ereignis einreichen

97

Ich habe ein Problem mit .on(). Ich habe mehrere Formularelemente (Formulare mit class="remember"), außerdem füge ich form.remembermit AJAX ein weiteres hinzu . Ich möchte also, dass es das Submit-Ereignis wie folgt behandelt:

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

Mit AJAX hinzugefügte Form funktioniert jedoch nicht.

Wo ist das Problem? Ist es ein Fehler?

jquery ajax forms submit Anton Abramov
quelle
9
Versuchen Sie$(document).on('submit','form.remember',function(){...})
Sergio
1
@Sergio durch documentdas nächstgelegene statische übergeordnete Element ersetzen .
Mark Baijens

Antworten:

216

Sie müssen das Ereignis an die Dokumentebene delegieren

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

$('form.remember').on('submit'funktioniert genauso wie, $('form.remember').submit(aber wenn Sie $(document).on('submit','form.remember'es verwenden, funktioniert es auch für das später hinzugefügte DOM.

Dipesh Parmar
quelle
24
Denken Sie auch daran, dass $(document).ondie Leistung viel geringer ist als $('form.remember').on('submit'. Es muss jetzt auf alle Übermittlungsereignisse im Dokument warten. Es ist viel besser, den Umfang ein wenig einzuschränken, als on documentwenn möglich zuzuhören
Liam
7
$ ('body'). on ('submit', 'form.remember', function () {// code}); löste mein Problem
Olotin Temitope
Obwohl @Liam korrekt ist, ist $ (document) .on immer noch nützlich für CRUD-Operationen mit Ajax-gerenderten Elementen.
Norielle Cruz
37

Ich hatte ein Problem mit den gleichen Symptomen. In meinem Fall stellte sich heraus, dass meiner Submit-Funktion die Anweisung "return" fehlte.

Beispielsweise:

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })
vitor_gaudencio_oliveira
quelle
2
Beachten Sie, dass return false;das Formular nicht gesendet wird. Zum Absenden des Formulars verwenden return true;.
Kai Noack
0

Das Problem hierbei ist, dass das "Ein" auf alle Elemente angewendet wird, die zu diesem Zeitpunkt vorhanden sind. Wenn Sie ein Element dynamisch erstellen, müssen Sie das on erneut ausführen:

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

createNewForm();

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

Da Formulare normalerweise Namen oder IDs haben, können Sie sie auch einfach an das neue Formular anhängen. Wenn ich viele dynamische Dinge erstelle, füge ich eine Setup- oder Bindefunktion hinzu:

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

Wenn Sie also etwas erstellen (in meinem Fall normalerweise Schaltflächen), rufe ich einfach bindItems auf, um alles auf der Seite zu aktualisieren.

createNewButton();
bindItems();

Ich mag es nicht, 'Körper'- oder Dokumentelemente zu verwenden, weil sie bei Registerkarten und Modalitäten dazu neigen, herumzuhängen und Dinge zu tun, die Sie nicht erwarten. Ich versuche immer, so spezifisch wie möglich zu sein, es sei denn, es ist ein einfaches 1-Seiten-Projekt.

Danial
quelle