Les événements déclenchés par un élément généré dynamiquement ne sont pas capturés par le gestionnaire d'événements

J'ai un <div> avec id="modal" généré dynamiquement avec la méthode jQuery load() :

 $('#modal').load('handlers/word.edit.php');

word.edit.php contient quelques éléments d'entrée, qui sont chargés dans un modal <div> .

À l' keyup méthode de keyup de jQuery, je peux capturer les valeurs d'entrée après un incendie d'événement, mais lorsque les éléments sont ajoutés dynamiquement à la div modal, l'événement n'est plus déclenché lorsque l'utilisateur saisit son texte.

Quelle méthode jQuery prend en charge les événements de manipulation déclenchés par des éléments dynamiquement créés?

Le code pour créer les nouveaux éléments d'entrée est:

 $('#add').click(function() { $('<input id="'+i+'" type="text" name="translations' + i + '" />') .appendTo('#modal');

Le code pour capturer les valeurs de l'utilisateur est:

 $('input').keyup(function() { handler = $(this).val(); name = $(this).attr('name');

Ce deuxième bloc de code semble fonctionner pour les éléments d'origine, mais il n'est pas déclenché par les nouveaux éléments dynamiquement générés.

Vous devez déléguer l'événement à l'élément ancêtre statique le plus proche de la page (voir aussi «Comprendre la délégation de l'événement» ). Cela signifie simplement que l'élément où vous liez votre gestionnaire d'événements doit déjà exister au moment où le gestionnaire est lié, de sorte que, pour les éléments générés dynamiquement, vous devez permettre à l'événement de faire exploser et de le gérer plus loin.

La méthode jQuery .on est la façon de le faire (ou .delegate pour les anciennes versions de jQuery.)

 // If version 1.7 or above $('#modal').on('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); });

Ou dans les anciennes versions

 // If version 1.6 or below // note the selector and event are in a different order than above $('#modal').delegate('input', 'keyup', function() { handler = $(this).val(); name = $(this).attr('name'); });

Cela se produit parce que vous ajoutez l'élément de saisie après avoir fermé l'événement. Essayez .on :

 $('body').on('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); });

L'utilisation de .on garantira que l'événement de la keyup est connecté aux entrées qui sont sur la page à l'origine, ainsi que celles qui sont ajoutées ultérieurement dynamiquement.

Lorsque vous modifiez dynamiquement le DOM, jQuery ne vous attache pas de gestionnaire d'événements. Vous devez utiliser sur () et les événements délégués

Pour vos articles de saisie, vous aurez besoin de quelque chose comme:

 $("<parentSelector>").on("keyup", "input", function() { handler = $(this).val(); name = $(this).attr('name'); })

Lorsque parentSelector est quelque chose de plus élevé dans le DOM que l'élément de saisie, et un élément qui existe au chargement de la page, peut-être l'ID du formulaire ou quelque chose.

Les liaisons de fonction sont effectuées en chargement de page. Pour travailler sur les éléments créés dynamiquement à l'aide de la fonction en direct (). Exemple:

 $ ("p"). live ("click", function () { // Your function });

Si vous devez capturer des modifications pour tous les éléments du formulaire, en particulier les cases sélectionnées, je sais qu'elles ne sont pas mentionnées ici, mais il est utile de savoir, utilisez le code suivant:

 $(document).on('change', ':input', function () { alert('value of ' + $(this).attr('name') + ' changed') });

Cela devrait couvrir toutes les input , la zone de textarea , la checkbox , la checkbox , la radio , etc.