如何将 bootstrap 下拉列表绑定到 html 在 jquery 中创建然后附加

Question

我正在尝试在 jquery 中构建一些下拉列表。我正在努力获得 $('.dropdown-toggle').dropdown() 绑定到我添加的 html.

我在这里创建了一个 fiddle 来演示这个问题。 我希望底部下拉菜单与顶部下拉菜单相同。

我使用纯 html 标记创建了上方的下拉菜单。 我通过 jquery.

创建了底部下拉菜单

这里是fiddlehttp://jsfiddle.net/hLqkLxrm/

fiddle describing problem

这里是 javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {

    var nestedjson = '[';
    nestedjson += '{"name":"dogs","href":"#", "innerlist":[';
    nestedjson += '{"name":"pug","href":"pug"},'
    nestedjson += '{"name":"shitzu","href":"shitzu"}';
    nestedjson += ']},';
    nestedjson += '{"name":"rodents","href":"#", "innerlist":[';
    nestedjson += '{"name":"mouse","href":"a"},';
    nestedjson += '{"name":"rat","href":"b"},';
    nestedjson += '{"name":"gerbil","href":"c"}';
    nestedjson += ']}]';



    var parsedjson = JSON.parse(nestedjson);


    var myhtml = '<ul class="nav nav-pills">';


    $.each(parsedjson, function () {
        myhtml += '<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">' + this.name + '<b class="caret"></b></a> ';
        myhtml += '<ul class="dropdown-menu>';
        $.each(this.innerlist, function () {
            myhtml += '<li><a tabindex="-1" href = "' + this.href + '">';
            myhtml += this.name + '</a></li>';
        });
        myhtml += '</ul>';
        myhtml += '</li>';
    });


    myhtml += '</ul>';


    $(myhtml).appendTo('body');

    // not sure how to bind the bootstrap dropdown to added components.
    // this is not working
    $('body').on("change", function () {
        alert('appended');
        $('.dropdown-toggle').dropdown();
    });
    
    


});

  </script>

Answer 1

在您的 $.each 函数的第二行，html 的格式不正确..

变化：

myhtml += '<ul class="dropdown-menu>';

收件人：

myhtml += '<ul class="dropdown-menu">';

此外，您不需要正文 'change' 处理程序，因为 Bootstrap 数据属性将启用下拉列表以进行切换。

演示：http://www.bootply.com/kzXvjXuE5P