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

标签 javascript jquery html css

我试过 CSSmenu 中的垂直菜单示例站点、示例源代码工作和菜单根据示例扩展,当我尝试动态添加菜单时,即使我已经验证了最终对象结构,这些菜单也没有扩展。

动态菜单代码:

<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() {

所以动态创建的元素将不会被这个click处理程序处理。您可以修改脚本的行,将此处理程序转换为 delegated event handler :

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

关于javascript - 垂直菜单扩展不适用于动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28825015/

相关文章:

javascript - 有什么方法可以将 OpenTextFile 用于服务器目的吗?

javascript - 将 Prototype 代码翻译成 Jquery 版本

javascript - 在 Firefox 上按下空格键时禁用向下滚动

jquery - 一次只允许从一个 div 中选择文本

html - 浏览器呈现安全字体而不是本地

javascript - 链接的转换延迟大于内容

javascript - 如何使用 javascript 发送电子邮件而不更改窗口位置?

javascript - 在 Angular 6 react 形式的单选按钮的基础上禁用文本区域

jquery - <p> 标签不显示在嵌套的 div 层中

jquery - 如何强制文本框中字母的大小写