Bootstrap Ul 下拉菜单动态添加后点击不能展开 高手进来看看 在线等

[撒哈拉_小猴]

如上图
测试页面 可以点击下拉展开
动态添加 点击后没反应无法展开
两段代码是一样的不同只是测试页面是直接写在页面上的 而 动态添加是使用

  $(function () {

            var li = "<li class=\"has-sub\">"+
                    "<a href=\"javascript:void(0);\"><span>动态添加</span><i class=\"fa fa-caret-right fa-fw pull-right\"></i></a>"+
                    "<ul class=\"sub-menu\">"+
                     "<li><a href=\"left1.html\"><i class=\"fa fa-circle-o fa-fw\"></i> left1</a></li>"+
                     "<li><a href=\"left2.html\"><i class=\"fa fa-circle-o fa-fw\"></i> left2</a></li>"+
                     "<li><a href=\"left3.html\"><i class=\"fa fa-circle-o fa-fw\"></i> left3</a></li>"+
                    "</ul>"+
               " </li>";
            $("#aabb").append(li);


           
        });

添加的...

 <div class="sidebar">
            <ul class="nav" id="aabb">
                <li><a href="index.html">主页面</a></li>
                <li><a href="plugs.html">插件库</a></li>
                <li><a href="uis.html">UI库</a></li>
                <li class="has-sub">
                    <a href="javascript:void(0);"><span>测试页面</span><i class="fa fa-caret-right fa-fw pull-right"></i></a>
                    <ul class="sub-menu">
                        <li><a href="left1.html"><i class="fa fa-circle-o fa-fw"></i> left1</a></li>
                        <li><a href="left2.html"><i class="fa fa-circle-o fa-fw"></i> left2</a></li>
                        <li><a href="left3.html"><i class="fa fa-circle-o fa-fw"></i> left3</a></li>
                    </ul>
                </li>
            </ul>
        </div>

高手帮忙看看谢谢了.这个是源网址 可以下载后自己修改就能测试..http://shihao316558512.github.io/bootstrap/

[撒哈拉_小猴]

搞定了.... 动态加载的没能定位到元素 修改了下defaul.js把左侧的这个方法隐藏掉.

 //$(".has-sub>a").click(function () {
        //    alert();
        //    $(this).parent().siblings().find(".sub-menu").slideUp();
        //    $(this).parent().find(".sub-menu").slideToggle();
        //})

再到页面加载的地方注册事件

<script type="text/javascript">
        $(function () {
            var li = "<li class=\"has-sub\">"+
                    "<a href=\"javascript:void(0);\"><span>动态添加</span><i class=\"fa fa-caret-right fa-fw pull-right\"></i></a>"+
                    "<ul class=\"sub-menu\">"+
                     "<li><a href=\"left1.html\"><i class=\"fa fa-circle-o fa-fw\"></i> left1</a></li>"+
                     "<li><a href=\"left2.html\"><i class=\"fa fa-circle-o fa-fw\"></i> left2</a></li>"+
                     "<li><a href=\"left3.html\"><i class=\"fa fa-circle-o fa-fw\"></i> left3</a></li>"+
                    "</ul>"+
               " </li>";
            $("#aabb").append(li);


            $(".has-sub>a").click(function () {
                $(this).parent().siblings().find(".sub-menu").slideUp();
                $(this).parent().find(".sub-menu").slideToggle();
            })

        });


    </script>

[gbcS]

[gbcS]

我和你的问题很像，看了你的解决方法是修改了js源码。我也搞了搞，将模板的js相关源码复制到我动态添加html代码js操作后，bootstrap下拉列表效果ok了，很感谢你。