Javascript 垂直菜单扩展不适用于动态内容_Javascript_Jquery_Html_Css

Javascript 垂直菜单扩展不适用于动态内容

javascript jquery html css

Javascript 垂直菜单扩展不适用于动态内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我尝试了一个垂直菜单的样本，样本源代码正在工作，菜单正在按照样本进行扩展，当我尝试动态添加菜单时，即使我验证了最终的对象结构，这些菜单也没有扩展带有动态菜单的代码： <body> <script> /** * Comment */ function add() { var list = document.getElementById('list');

我尝试了一个垂直菜单的样本，样本源代码正在工作，菜单正在按照样本进行扩展，当我尝试动态添加菜单时，即使我验证了最终的对象结构，这些菜单也没有扩展

带有动态菜单的代码：

<body>
    <script>
        /**
         * Comment
         */
        function add() {
            var list = document.getElementById('list');
            var elem=document.createElement('li');
            elem.setAttribute('class','last has-sub');
            elem.innerHTML="<a href='#'><span>My_Products</span></a>"
                +"<ul style='display: none;' >"
                    +"<li><a href='#'><span>Product 1</span></a></li>"
                    +"<li><a href='#'><span>Product 2</span></a></li>"
                    +"<li class='last'><a href='#'><span>Product 3</span></a></li>"
               + "</ul>";
       list.appendChild(elem);
        }
    </script>
    <div id='cssmenu'>
        <ul id='list'>
            <li class='active'><a href='#'><span>Home</span></a></li>
            <li class='has-sub'><a href='#'><span>Products</span></a>
                <ul>
                    <li><a href='#'><span>Product 1</span></a></li>
                    <li><a href='#'><span>Product 2</span></a></li>
                    <li class='last'><a href='#'><span>Product 3</span></a></li>
                </ul>
            </li>

            <li><a href='#'><span>Contact</span></a></li>
            <li class='last has-sub'><a href='#'><span>About</span></a>
                <ul>
                    <li><a href='#'><span>Company</span></a></li>
                    <li class='last'><a href='#'><span>Contact</span></a></li>
                </ul>
            </li>
        </ul>
    </div>

    <input type="button" value="Add Menu" onclick="add()">
</body>

此库中的script.js包含以下行：

$('#cssmenu > ul > li > a').click(function() {

因此，动态创建的元素将不会使用此单击处理程序进行处理。您可以修改脚本的行，将此处理程序转换为：

共享各自的CSS。JSFIDLE链接会更好。编辑：此库中的script.js有一行：$'cssmenu>ul>li>A'。单击函数{。将其替换为$'cssmenu'。单击，'，'列表>li>A'，函数{@Regent，你的想法行得通，但是为什么即使动态菜单也在同一个菜单下，而且问题只出现在新菜单上，但现在它起作用了thanks@jerith2由于$'cssmenu>ul>li>a'。对于新创建的元素，单击、单击事件将不会使用此处理程序进行处理。这就是为什么需要委托事件处理程序的原因e、为什么图书馆的作者不这样做——我不知道。

$('#cssmenu').on('click', '#list > li > a', function() {