动态生成HTML事件不生效解决办法

通过 Ajax 动态加载数据时，通过页面加载时绑定事件的方式绑定的函数不能生效（其实是没有绑定上）。

html 代码段

<div class="menu_con">
    <ul id="lvidAll">
      <li class="on">
        <a href="javascript:void(0);">全部a>
      li>
    ul>
div>

jquery 代码段

$(function(){
    $(".menu_con>ul>li").click(function(){
        $(this).addClass("on").siblings().removeClass("on");
        $(".tm_bg").hide();
        $(".menu_con>ul").hide();
        $(".menu_ul>li").removeClass("on");
    });

    // 加载下拉列表选项
    loadLi("#lvidAll", null, mainpath + "/lvtime/list.shtml", "lvid");
})

function loadLi(panel, requestdata, ajaxurl, paramKey) {
    appendUtil(panel, requestdata, ajaxurl, function(response){
        var list = response.list;
        $.each(list,function(i,obj){
            var liHtml = 
                "

                +paramKey+ "','"+obj.id+"');\">"
                +obj.name+"
";
            $(panel).append(liHtml);
        });
    }, true);
}

按照上述的方式动态加载出来的 html 是没有绑定上 click 事件的，解决办法是使用 jquery 的 on() 方法，改造后的时间绑定方式如下：

$(function(){
    $(".menu_con>ul").on("click","li",function(event){
        $(this).addClass("on").siblings().removeClass("on");
        $(".tm_bg").hide();
        $(".menu_con>ul").hide();
        $(".menu_ul>li").removeClass("on");
    });

    // 加载下拉列表选项
    loadLi("#lvidAll", null, mainpath + "/lvtime/list.shtml", "lvid");
})

下面说下 on() 方法

定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法
$(selector).on(event,childSelector,data,function,map)

参数描述：
event

• event
  必需。规定要从被选元素移除的一个或多个事件或命名空间。
  由空格分隔多个事件值。必须是有效的事件。

• childSelector
  可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

• data
  可选。规定传递到函数的额外数据。

• function
  可选。规定当事件发生时运行的函数。

• map
  规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

jQuery on() 方法

参考内容1
参考内容2