Dynamique menu déroulant avec bootstrap ne fonctionne pas
J'ai été en utilisant bootstrap pour un moment, et je suis tombé sur un problème lorsque vous essayez d'ajouter un menu déroulant dynamique.
C'est le JavaScript que j'ai:
$(document).ready(function() {
$("#clickHere").click(function(){
$("#appendHere").html("<div class=\"dropdown\" style=\"display:inline;\"><a id=\"drop1\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"><b class=\"caret\"></b></a><ul class=\"dropdown-menu pull-left\"><li><button>Analyse Now</button></li><li class=\"divider\"></li><li><button>Analyse Later</button></li></ul></div>");
});
$('#drop1').on('click', function(e){
e.stopPropagation();
$(".dropdown-toggle").dropdown('toggle');
});
});
Voici le code HTML:
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu" id="mainMenu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
<button id="clickHere">Click here </button>
<div id="appendHere"></div>
Ici est le violon
http://jsfiddle.net/szx4Y/83/
La liste déroulante ajouter dynamiquement ne fonctionne pas correctement. J'ai réussi à le faire fonctionner dans mon code, mais il n'apparaît qu'une fois de toute façon.
Quelqu'un peut-il m'aider?
Merci!
- Le point d'ancrage de l'élément a de la classe
dropdown-toggle
. Le sélecteur est valide. - Pourriez-vous être plus clair?
Vous devez vous connecter pour publier un commentaire.
Ici est un travail jsFiddle: http://jsfiddle.net/szx4Y/85/.
Pour info, votre jsFiddle ne fonctionne pas parce que vous n'avez pas à inclure le script Bootstrap fichier. Donc, si vous avez été faire des tests là qui n'auraient pas travaillé.
J'ai changé votre code pour appeler
$(".dropdown-toggle").dropdown();
immédiatement après l'ajout de votre code HTML. En appelant la méthode, vous êtes à la mise en place des éléments pour gérer tous les fichiers d'amorce de la fonctionnalité (cliquez sur les événements, etc); il n'y a aucune raison de l'appeler à chaque fois que vous cliquez sur votre nouvel élément.Code
HTML
Javascript
CSS
$('.dropdown-toggle').dropdown();
à tous et il fonctionne toujours très bien. L'appeler une fois dans l'événement ready ne fait rien car de toute façon aucun élément avec la classe.dropdown-toggle
existe au moment de l'appel.