jquery的动态绑定on()方法

摘要: 在jquery中，为动态生成的控件绑定事件，一般会使用on()方法。这里简单记录一个绑定案例

// 基本格式如下：
// $(selector).on(event,childSelector,data,function,map)

function bindUserButton() {
var btn_join;
var room = $("#room");

var func_join = function(event) {
var itemno = event.data.num;
var btn = $("#btn_join" + itemno);
var id = btn.parent().attr('id');
alert(id);
}

for (var i=1; i<=5; i++) {
btn_join = "#btn_join" + i;
// 这里的提供了data部分的参数
room.on("click", btn_join, {num:i}, func_join);
}
}

在上面的函数中，我为“#room"元素的子元素：一个5个按钮，动态绑定了五个函数，点击这些按钮，弹出相应的ID。

这，我使用到了event参数，然后从event.data中获得data部分参数，即 var itemno = event.data.num; 部分。

也可以替换成下面这种写法：

function bindUserButton() {
var btn_join;
var room = $("#room");

var func_join = function(event) {
var id = $(this).parent().attr('id');
alert(id);
}

for (var i=1; i<=5; i++) {
btn_join = "#btn_join" + i;
room.on("click", btn_join, func_join);
}
}

使用$(this)的方法来访问当前按钮，会方便很多，也不必再另外传递data参数。