动态添加元素的事件绑定

Paste_Image.png

Paste_Image.png

今天在对接网站数据时，发现个bug，就是我动态添加的元素没办法直接使用它的事件；

点击左边的年份，切换具体的期数；

$(".menu-ul").empty();//清空该元素下面的子元素

for( var i = 1 ; i <= month; i ++ ){
    var li = "<li value='"+i+"'>"+year+"年第"+i+"期</li>";
    $(".menu-ul").append(li);//根据取得的year、month动态添加期数元素
}

然后点击相应期数，显示不同期数的内容；

$(".menu-ul li").click(function(){
    //获取相应的年份和期数，再通过ajax获取数据，显示数据      
});

那么问题来了，我动态添加的元素（li）找不到click事件，去百度了下，找到了解决办法，就是使用jquery的.on()函数：
on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。
所以对自己的点击事件代码做了以下修改：

$(".menu-ul").on("click","li",function(){
    //获取相应的年份和期数，再通过ajax获取数据，显示数据      
});