Javascript Girl
  1. Javascript Girl
  3. Comment implémenter une fonction de touche avec un élément de création dynamique avec JQuery?
Intereting Posts
Jquery Datatable theme Hide header / footer balk Où mettons-nous les modules nœuds que nous installons par npm dans un projet Meteor? Webpack –watch ne compile pas les fichiers modifiés JQuery event.target ne fonctionne pas dans Firefox et IE? Comment tuer l'éclaboussement scintillant blanc au début de l'application iOS phonegap? Erreur: Autorisation refusée d'accéder à la propriété 'document' Test des modules CommonJS qui utilisent des alias et des cales de navigateur Comment enregistrer la toile svg dans le système de fichiers local Exemple Codex AJAX Impossible de charger jqGrid en utilisant json dans struts2 Comment puis-je créer un tableau de bits en version javascript? L'état de suspension est maintenu pendant une transition même si l'élément est parti JQuery addClass () à l'élément généré après l'ajout () Comment simplifier une décimale dans la plus petite fraction possible? Vérifiez si l'option est sélectionnée avec jQuery, sinon sélectionnez un défaut

Comment implémenter une fonction de touche avec un élément de création dynamique avec JQuery?

Je ne peux pas comprendre pourquoi le code suivant ne fonctionne pas. JSFIDDLE LINK 

$(document).ready(function () { addInput(); }); var limit = 30; function addInput() { var numberOfRows = $("#shipping tr").size(); var id = numberOfRows; if (numberOfRows == limit) { alert("You have reached the limit of adding " + limit + " inputs"); } else { $('#shipping').append('<tr id="rate' + id + '"></tr>'); $('tr#rate' + id).append('<td></td>'); $('tr#rate' + id).append('<td><input type="text" name="rate" /></td>'); } $('input[name=rate]').on('keyup', 'input', function () { alert('YAY'); return false; }); }

J'essaie d'attribuer une fonction de keyup aux entrées que j'ajoute dynamiquement.

Production attendue: YAY! Dans une boîte contextuelle

Aidez-nous!

Joignez un gestionnaire d'événements de clés à la table d'expédition, et l'évènement passe de l' input[name="rate"] à la table d'expédition: 

 $('#shipping').on('keyup', 'input[name="rate"]', function () { alert('YAY'); return false; });

DEMO

Vous devez ajouter une délégation au document car elle est ajoutée au document .

Exemple 

 $(document).on('keyup', 'input[name="rate"]', function () { alert('YAY '); });

Working Demo