动态生成元素点击失效

在开发过程中，我把公用的menu提取出来，即发觉点击失效，根据经验，知道动态生成元素的写法应是

$("#demo").on('click', 'li',function(){
...
});

下面转摘关于动态元素点击事件的原理

发现动态生成的标签事先绑定的点击事件点击了没反应。总结一下,推测上面这个监听函数，是在网页加载的时候就指定了对象,而通过代码追加，如通过js追加的元素，是不能匹配这个事件的。那么，我们应该使用什么来绑定动态元素呢，支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。

贴上一段原错误代码

! function($) {
    "use strict";

    /**
    Sidebar Module
    */
    var SideBar = function() {
        this.$body = $("body"),
        this.$sideBar = $('aside.left-panel'),
        this.$navbarToggle = $(".navbar-toggle"),
        this.$navbarItem = $("aside.left-panel nav.navigation > ul > li:has(ul) > a")
    };
    ....
    this.$navbarItem.click(function () {
    ...
    });
};
wow.init();

正确代码应如下

! function($) {
    "use strict";

    /**
    Sidebar Module
    */
    var SideBar = function() {
        this.$body = $("body"),
        this.$sideBar = $('aside.left-panel'),
        this.$navbarToggle = $(".navbar-toggle"),
    };
    ....
     $("aside.left-panel").on("click","nav.navigation > ul > li:has(ul) > a", function(){
    ...
    });
};
wow.init();