twitter-bootstrap 带引导程序的动态下拉菜单不起作用

Dynamic dropdown menu with bootstrap not working

提问by Larissa Leite

I have been using bootstrap for a while, and I came across an issue when trying to add a dropdown menu dynamically.

我使用 bootstrap 有一段时间了，在尝试动态添加下拉菜单时遇到了一个问题。

This is the JavaScript that I have:

这是我拥有的 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');
 });
});

Here is the 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>

Here is the fiddle http://jsfiddle.net/szx4Y/83/

这是小提琴 http://jsfiddle.net/szx4Y/83/

The dropdown added dynamically does not work properly. I have managed to make it work in my code, but it only appears once anyway.

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

Can anyone help me out?

谁能帮我吗？

Thanks!

谢谢！

回答by Justin Helgerson

Here is a working jsFiddle: http://jsfiddle.net/szx4Y/85/.

这是一个有效的 jsFiddle：http: //jsfiddle.net/szx4Y/85/。

FYI, your jsFiddle didn't work because you didn't include the Bootstrap script file. So if you were doing any testing there that wouldn't have worked.

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

I changed your code to call $(".dropdown-toggle").dropdown();immediately after you append your HTML. By calling that method you are setting up the elements to handle all the Bootstrap functionality (click events, etc); there's no reason to call it every time you click your new element.

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

Relevant Code

相关代码

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

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

CSS

.dropdown-menu {
    float:right;
}