jQuery ：为动态添加的表格添加click事件

**

情境要求

**

最近在做一个预约订餐的页面，要求根据后台数据建立动态的座位排列。这是根据AJAX的返回数据data建立的表格。
success:function (data) {
var a = data.seat_x;
var b = data.seat_y;
$("#seatDiv").empty();
for(var i = 1; i <= a; i++){//i为seat_x j为seat_y
$("#seatDiv").append(<ul></ul>);
for(var j=1;j<=b;j++){
$("#seatDiv ul").last().append(<li id = ${i}-${j}><img src="../img/1.png"></li>)
}
$("#seatDiv ul").last(“li”).append("");
}
},
最后效果图如下：

但是，当我为ul 里面的 li 添加click事件时，无法触发点击事件，然后大家应该都知道无法给动态添加的元素节点添加click事件。这个时候就需要使用on或者live方法。不过live方法好像被高版本禁用了。建议使用on事件。

重点开始

然后我是在seatDiv里面，动态添加的

然后通过jQuery锁定点击图片的id。
刚开始是这么写的：
$(“li”).click(function(){
})//不会触发事件
$(“ul”).on(“click”,“li”,function(){
})//不会触发事件
然后经研究发现，需要添加到将第一个jQuery锁定到静态元素上。
$(“seatDiv”).on(“click”,“ul”,function(){
})//可以触发事件，但是不能获得点击li的id进而确定选中的行和列（x，y）

又进行下面尝试：
(“seatDiv”).children(“ul”).on(“click”,“li”,function(){
})

最后发现
$("seatDiv").on("click","li",function())//即可总结：$(".class").on事件,class需要是静态结点，不然无法触发click事件。菜鸡一枚，敬请指正。