javascript - 动态下拉菜单与 Bootstrap 不起作用

Question

我使用 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>

这是 fiddle http://jsfiddle.net/szx4Y/83/

动态添加的下拉菜单无法正常工作。我已经设法让它在我的代码中工作，但无论如何它只出现一次。

谁能帮帮我吗？

谢谢!

Answer 1

这是一个工作的 jsFiddle:http://jsfiddle.net/szx4Y/85/ .

仅供引用，您的 jsFiddle 无法工作，因为您没有包含 Bootstrap 脚本文件。因此，如果您在那里进行任何测试，那是行不通的。

我将您的代码更改为在附加 HTML 后立即调用 $(".dropdown-toggle").dropdown(); 。通过调用该方法，您可以设置元素来处理所有 Bootstrap 功能(单击事件等)；没有理由每次单击新元素时都调用它。

相关代码

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;
}