Problème d'ajout dynamique de champs de formulaire par Jquery

Question

J'utilise le code suivant pour insérer des champs de formulaire supplémentaires.

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

J'envoie dynamiquement les valeurs du champ à mysql lorsqu'un événement de flou se produit. Cependant, lorsque ce champ est inséré, il n'est pas reconnu et l'événement blur ne détecte pas si une valeur a été saisie dans les nouveaux champs. Cela est-il dû au fait que le gestionnaire d'événement de flou original est configuré sur le document prêt ?

Comment faire pour que le code jquery de mise à jour de mysql reconnaisse le moment où les champs de formulaire supplémentaires sont rendus visibles après que l'initialisation du document prêt ait déjà été effectuée ? J'ai essayé plusieurs événements basés sur le div id mais sans succès.....

Answer 1

La raison pour laquelle votre code ne fonctionne pas pour les entrées ajoutées dynamiquement est que lorsque vous faites quelque chose comme :

$(selector).blur(myFunction);

jQuery passe en revue chaque élément qui correspond à selector à ce moment-là et ajoute un gestionnaire d'événement qui exécute myFunction lorsque le blur est déclenché sur l'élément. Cela signifie que tous les éléments qui correspondent à selector ajouté après cette ligne de code s'exécute n'aura pas été liée.

Pour contourner ce problème, jQuery a introduit la fonction live dans la version 1.3. Comme le dit la documentation :

Associe un gestionnaire à un événement (comme le clic) pour tous les éléments appariés actuels et futurs. Peut également lier des événements personnalisés.

Malheureusement, à l'heure actuelle, jQuery ne prend pas en charge l'option blur avec l'événement live fonction.

Vos options sont alors les suivantes :

A) Exécutez le code de liaison chaque fois que vous ajoutez de nouvelles entrées.
B) Utiliser le livequery qui est que live est basé sur le flou et le supporte.

Personnellement, je choisirais A.

Answer 2

Vous devez lier vos événements à l'aide de la méthode live() :

par exemple :

$("input").live("blur", function() { ... });

De cette façon, tout champ ajouté au moment de l'exécution sera lié au gestionnaire d'événements.

EDIT : comme indiqué dans les commentaires, "blur" n'est pas supporté, mais il y a un plugin qui supporte cet événement : http://plugins.jquery.com/project/livequery