带引导程序的动态下拉菜单不起作用 [英] Dynamic dropdown menu with bootstrap not working

问题描述

我使用 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>稍后分析

");});$('#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="#">另一个动作</a></li><li><a tabindex="-1" href="#">这里还有别的东西</a></li><li class="divider"></li><li class="dropdown-submenu pull-left"><a tabindex="-1" href="#">更多选项</a><ul class="下拉菜单" id="mainMenu"><li><a tabindex="-1" href="#">二级链接</a></li><li><a tabindex="-1" href="#">二级链接</a></li><li><a tabindex="-1" href="#">二级链接</a></li><li><a tabindex="-1" href="#">二级链接</a></li><li><a tabindex="-1" href="#">二级链接</a></li><button id="clickHere">点击这里</button><div id="appendHere"></div>

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

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

有人可以帮我吗?

谢谢！

解决方案

这是一个有效的 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="#">另一个动作</a></li><li><a tabindex="-1" href="#">这里还有别的东西</a></li><li class="divider"></li><li class="dropdown-submenu pull-left"><a tabindex="-1" href="#">更多选项</a><ul class="下拉菜单" id="mainMenu"><li><a tabindex="-1" href="#">二级链接</a></li><li><a tabindex="-1" href="#">二级链接</a></li><li><a tabindex="-1" href="#">二级链接</a></li><li><a tabindex="-1" href="#">二级链接</a></li><li><a tabindex="-1" href="#">二级链接</a></li><button id="clickHere">点击这里</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>稍后分析

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

CSS

.dropdown-menu {浮动:右；}

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

This is the JavaScript that I have:

$(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:

<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/

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!

解决方案

Here is a working 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.

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.

Relevant 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>

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

这篇关于带引导程序的动态下拉菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！