Блог

Я уже некоторое время использую bootstrap и столкнулся с проблемой при попытке динамического добавления выпадающего меню.

Это тот JavaScript, который у меня есть:

 $(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');
 });
});
  

Вот 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>
  

Вот скрипка
http://jsfiddle.net/szx4Y/83 /

Выпадающий список, добавляемый динамически, не работает должным образом. Мне удалось заставить его работать в моем коде, но в любом случае он появляется только один раз.

Кто-нибудь может мне помочь?

Спасибо!

Вот рабочий jsFiddle: http://jsfiddle.net/szx4Y/85 /.

К вашему сведению, ваш jsFiddle не работал, потому что вы не включили файл сценария начальной загрузки. Так что, если бы вы проводили там какое-либо тестирование, это бы не сработало.

Я изменил ваш код на вызов $(".dropdown-toggle").dropdown(); сразу после добавления вашего HTML. Вызывая этот метод, вы настраиваете элементы для обработки всех функций начальной загрузки (события щелчка и т. Д.); Нет причин вызывать его каждый раз, когда вы нажимаете на свой новый элемент.

Соответствующий код

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>
  

Javascript

 $(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>");
    });

    $('.dropdown-toggle').dropdown();
});
  

CSS

 .dropdown-menu {
    float:right;
}