Je travaille avec Bootstrap-ColorPicker afin de remplir une valeur d'entrée de couleur avec un simple contenu graphique. Afin de donner des "couleurs de pointe", j'ai essayé d'ajouter le bottestrap-colorPicker par défaut avec d'autres couleurs. Il ressemble à ceci:
p>
p>
afin d'atteindre cet objectif, j'ai ajouté ce qui suit code à la fin de la page. En gros, ColorPicker se charge par lui-même, puis appendez la DIV souhaitée avec les éléments. P>
[![resulting code][3]][3]
3 Réponses :
En général, vous devriez essayer d'éviter les gestionnaires d'événements en ligne tels que Vous pouvez prendre cette approche à la place: onclick , surtout lorsque vous travaillez avec JQuery, qui fournit lui-même une interface assez flexible pour la liaison des événements.
Mais si j'utilise différentes icônes avec des identifiants différents?
@ Fábioaraújo vient de mettre à jour la réponse à utiliser .fa-cercle à la place - cela aide-t-il?
Le code utilisé pour créer et insérer vos éléments DOM n'est pas correctement formaté. Il y a des citations non écartées dans d'autres citations:
p>
Pour résoudre ceci, vous pouvez scaper les guillemets internes de cette longue chaîne (voir <script>
$(document).ready(function() {
setTimeout(function() {
$(".colorpicker-color").remove();
$('<div id="container"><div><small class="text-muted">Sugestões:</small><div id="inner"><i class="fas fa-circle" id="color_0"></i></div></div> </div>').insertAfter(".colorpicker-hue");
$(".colorpicker").css("height","185px");
}, 500);
$('body').on("click", ".fa-circle", function() {
alert("I'm working!");
});
});
</script>
<style>
#container{
display: block;width:130px;height:100px;/* float: right; */position: absolute;top: 104px;/* overflow-y: scroll; */
}
#inner {
display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;
}
#color_0{
top: 0px;margin:5px;color:#aaa;cursor:pointer
}
</style>
Je viens de passer un mauvais exemple. Même avec une chaîne non scapée, cela ne fonctionnera de toute façon pas.
Meilleure chose à faire est d'organiser votre code pour le rendre plus lisible (par exemple, extraire votre CSS en ligne), cela vous permettra de mieux identifier ce qui n'est pas correct
Ça ne marche pas. Je pense que c'est parce que ColorPicker c'est gentil une "popup" et ferme quand je clique et empêche d'une manière par défaut, cliquez sur l'événement de mon icône ajouté dynamique.
Toutes les réponses ont un excellent conseil pour vous, mais ils ont peut-être manqué le problème. En fait, Ludovico vous a donné la réponse, mais elle a été discrètement comprise avec ses autres informations très utiles, alors peut-être que vous l'avez peut-être manquée.
Vous rencontrez quelque chose appelé délégation d'événement . Cela signifie que des éléments nouvellement ajoutés dans le DOM n'ont pas de cliquant des fixations associées à eux (même si vous les avez définis dans le code) car ils n'étaient pas dans le DOM lorsque les événements clic étaient liés aux éléments appropriés. (Notez que "The Dom" est fondamentalement la Webpage tel qu'il apparaît sur votre écran - avec tous les mods en temps réel de JavaScript, etc., il est donc plus que le code HTML.) très simple à résoudre ceci, en utilisant jQuery. Au lieu de: fais cela à la place: Qu'est-ce que cela est lier l'événement de clic sur quelque chose qui Est-ce que existe au moment où le DOM est rendu (c'est-à-dire l'objet "Document") - et JQuery's Références: https://learn.jquery.com/events/event-délégation/ https://apl.jquery.com/on/ < p> http://jqfundamentaux.com/chapter/events .on () Méthode regarde maintenant le DOM pour que toute autre chose soit insérée. Si un nouvel élément correspond à l'élément spécifié, l'événement de clic est lié à cet élément chaque fois qu'il apparaît dans le DOM .