Jquery .on () submit événement

98

J'ai un problème avec .on(). J'ai plusieurs éléments de formulaire (formulaires avec class="remember"), j'en ajoute également un autre en form.rememberutilisant AJAX. Donc, je veux qu'il gère l'événement de soumission quelque chose comme:

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

mais le formulaire ajouté avec AJAX ne fonctionne pas avec.

Où est le problème? Est-ce un bug?

jquery ajax forms submit Anton Abramov
la source
9
Essayer$(document).on('submit','form.remember',function(){...})
Sergio
1
@Sergio remplace documentpar le parent statique le plus proche.
Mark Baijens

Réponses:

217

Vous devez déléguer l'événement au niveau du document

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

$('form.remember').on('submit'fonctionne de la même manière que $('form.remember').submit(mais lorsque vous utilisez, $(document).on('submit','form.remember'cela fonctionnera également pour le DOM ajouté plus tard.

Dipesh Parmar
la source
24
Gardez également à l'esprit que $(document).onles performances sont bien inférieures à $('form.remember').on('submit'. Il doit maintenant écouter tous les événements de soumission dans le document. Il est préférable de restreindre un peu la portée plutôt que d'écouter on document, si possible
Liam
7
$ ('body'). on ('submit', 'form.remember', function () {// code}); a résolu mon problème
Olotin Temitope
Même si @Liam est correct, $ (document) .on est toujours utile pour les opérations CRUD sur les éléments rendus ajax.
Norielle Cruz
38

J'ai eu un problème avec les mêmes symptômes. Dans mon cas, il s'est avéré que ma fonction d'envoi manquait l'instruction "return".

Par exemple:

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })
vitor_gaudencio_oliveira
la source
2
Notez que return false;ne soumettra pas le formulaire. Pour soumettre le formulaire, utilisez return true;.
Kai Noack
0

Le problème ici est que le "on" est appliqué à tous les éléments qui existent AU MOMENT. Lorsque vous créez un élément dynamiquement, vous devez réexécuter le:

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

createNewForm();

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

Étant donné que les formulaires ont généralement des noms ou des identifiants, vous pouvez également les joindre au nouveau formulaire. Si je crée beaucoup de choses dynamiques, j'inclus une fonction de configuration ou de liaison:

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

Ainsi, chaque fois que vous créez quelque chose (des boutons généralement dans mon cas), j'appelle simplement bindItems pour tout mettre à jour sur la page.

createNewButton();
bindItems();

Je n'aime pas utiliser des éléments de «corps» ou de document car avec les onglets et les modaux, ils ont tendance à traîner et à faire des choses auxquelles vous ne vous attendez pas. J'essaie toujours d'être aussi précis que possible à moins que ce ne soit un simple projet d'une page.

Danial
la source