使用jQuery动态绑定事件

一、需求

在实际项目的时候，遇到了一个问题，就是通过JS动态生成的元素，无法触发JS事件,JS代码在处理随着页面加载而加载的DOM元素是没有问题的。但是在处理页面加载完成后，通过动态添加的方式添加上的元素是无效的，需要另外利用Jquery绑定。

二、jQuery的on()方法

• jQuery的on()方法是支持在动态添加的元素上绑定事件的
• 动态绑定需要绑定需要绑定事件的父元素
• 具体格式如下:

$(需绑定事件的父元素).on(“click”,“需要绑定事件的元素”,function(){
执行操作
});

三、具体实例

	$(function () {
	var a = 1,
	$_div = $('#test');
	$('input[name=addbtn]').on('click', function () {
	$_div.append('<input type="button" name="test' + a + '" value="按钮' + a + '"/>');
	a++;
	});
	//偶数项点击事件
	$_div.on('click', 'input[name^=test]:even', function () { 
	alert('我是有效的on方法,你能看见我吗：' + this.value);
	});
	//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
	$('input[name^=test]:odd').on('click', function () { 
	alert('我是无效的on方法,你不能看见我');
	});
	//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
	$('input[name^=test]:odd').live('click', function () {
	alert('我是live方法,你能看见我吗：' + this.value);
	});
	});