Lier (keyup) aux éléments dynamiques dans jQuery (Twitter Bootstrap + typeahead)
Je suppose que certains d'entre vous ont dû froncer les sourcils en lisant ce titre, hein? Je suis sûr que les gens le demandent à chaque fois, mais je n'ai pas vu ma question particulière, alors j'essaie! Lier des événements à des éléments créés dynamiquement est ma kryptonite, je ne peux tout simplement pas envelopper la tête ...
Donc ok, j'utilise Twitter Boostrap, avec le plugin typehead(). J'utilise cette astuce pour le faire fonctionner avec des sources de données distantes. À ce stade, tout fonctionne. Je clique sur une entrée de texte dans mon formulaire, étiqueté pour cela, et les scripts vont charger des sources externes et le menu déroulant apparaît. Mais j'ai une création d'élément dynamique, et vous l'avez compris, cela ne fonctionnera tout simplement pas. J'explorais la méthode live(), mais en regardant "comment" les scripts sont tirés, je ne sais pas comment je peux l'implémenter.
$('#anInputField').typeahead().on('keyup', function(ev){
// stuff happens
});
Chaque fois qu'il y a une touche, le script déclenche une requête jSON, vérifie ses éléments et renvoie le résultat à typehead() qui effectue la partie de saisie semi-automatique du travail. Alors, comment puis-je dire à jQuery de regarder #aDropdownID créé après la liaison initiale? J'ai continué et vérifié si je pouvais utiliser live(), mais puisque on() le remplace ... Je ne sais rien!
Toute aide appréciée!
Pour que on() puisse déléguer, vous devez l'appeler sur un élément statique dont vous savez qu'il sera toujours là, puis vous passez l'élément dynamique comme:
$('#static-parent').on('keyup', '#aDropdownID', function(ev){
// stuff happens
});
Si vous n'avez pas d'élément parent statique, vous pouvez toujours utiliser body.
Cela fonctionne pour moi:
$(document).on('keyup', '#YourInputFieldId', function () {
//stuff happens
});