Bootstrap balises d'entrée ne fonctionne pas avec jquery
Je suis en utilisant Bootstrap balises d'entrée de faire des balises à l'intérieur de la saisie de texte dans la documentation:
Seulement ajouter de la data-role="tagsinput" à votre champ de saisie automatiquement
de le changer pour un tags champ de saisie.
Mais lors de l'utilisation de jquery avant la fonction:
$('#addrun').click(function () {
$('#addrun').before('<input type="text" value="Amsterdam,Washington,Sydney,Beijing" data-role="tagsinput" />');
});
il est affiché comme toute saisie de texte avec le texte à l'intérieur et pas de tags.
de l'aide ??
Vous devez vous connecter pour publier un commentaire.
Bootstrap est exécuté au chargement de la page, comme une auto-exécution de la fonction. Par l'ajout d'un nouvel élément du DOM - Par ce temps,
bootstrap-tagsinput.js
ne sais rien à ce sujet. Donc vous devrez l'Initialiser après l'avoir ajouté au DOM document à l'aide de JavaScript.Pour actualiser les balises input (Bootstrap Tagsinput Docs):
Donc pour vous, vous aurez besoin de:
Espère que ça aide! Bien que, au-dessus de la
$('input')
actualiser chaque<input>
balise dans l'ensemble du document, de sorte que vous pourriez donner à la préfixé<input>
tag une .classe ou un #ID pour un accès plus rapide =)Mise à jour:
Comme koala_dev fait correctement mentionner dans les commentaires, vous n'auriez probablement pas besoin de l'initialiser via
$('selector').tagsinput('refresh')
mais plutôt juste:.tagsinput('refresh')
devrait normalement être mis en œuvre sur une.tagsinput()
d'entrée qui est déjà initialisé avec de nouvelles options.bootstrap.js
n'est pas vraiment une partie de la question, aussi votre ne sommes pas des "ré-initialiser", mais plutôt de l'initialisation du plugin dans l'élément nouveau, aussi je ne suis pas sûr que vous devez appeler la méthode refresh, je crois que l'appel detagsinput()
suffiraitvar $newInput = $('<input type="text" value="Amsterdam,Washington,Sydney,Beijing" data-role="tagsinput" />'); $('#addrun').before($newInput); $newInput.tagsinput();
.tagsinput();
(mais je n'ai pas pu reproduire le problème)Je l'ai fait travailler des manières suivantes. Il montrait problème $(..).tagsinput() n'a pas été trouvé et que je pouvais maintenant mettre à jour les balises avec les nouvelles valeurs.
J'ai supprimé la première et la dernière ligne du fichier bootstrap-tagsinput.js, c'est-à
'(function ($) {'
et'})(window.jQuery)'
.Et a appelé la ci-dessous deux lignes où les balises a été requis pour l'affichage et la mise à jour.