La méthode .on() de jQuery combinée à l'événement submit

Question

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

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

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

Où se situe le problème ? S'agit-il d'un bug ?

Answer 1

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

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

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

Answer 2

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

Par exemple :

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

Answer 3

Le problème ici est que le "on" est appliqué à tous les éléments qui existent à ce moment-là. Lorsque vous créez un élément de manière dynamique, vous devez exécuter à nouveau le "on" :

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

createNewForm();

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

Comme les formulaires ont généralement des noms ou des ID, vous pouvez simplement les attacher au nouveau formulaire. Si je crée beaucoup de choses dynamiques, je vais inclure 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, dans mon cas), j'appelle simplement bindItems pour mettre à jour tout ce qui se trouve sur la page.

createNewButton();
bindItems();

Je n'aime pas utiliser les éléments de type "body" ou "document", car avec les onglets et les fenêtres modales, ils ont tendance à traîner et à faire des choses inattendues. J'essaie toujours d'être aussi précis que possible, sauf s'il s'agit d'un simple projet d'une page.