jquery给动态增加的元素绑定事件

用jquery来操作DOM，确实很方便，无论更改样式，还是绑定事件，都很方便，但最近遇到个小问题。原因是通常我们绑定的事件都是在已经存在的元素上用jquery绑定事件。但最近遇到的这个问题是，原来的页面已经生成了，然后会动态增加一些元素，希望这些动态增加的元素也能自动绑定上原来已经有的事件。

对问题本身来说，很简单，原因在于，你动态生成html代码并添加到DOM中去的时候，可以把事件写死，也就是不用jquery动态绑定事件，比如:

var html = '<input type="text" class="comment-validate" onblur="myBlur()" onfocus="myFocus()" />';
$("#div_dynamic_#222").append(html);

事件的代码就不写了。但这种是硬编码。也是在项目中常用的方式。但我想要的是用jquery 绑定方式实现:

$(".comment-validate").on("blur", function() {		 
	$(this).css("border", "1px solid red");			  
});

但这种方式绑定的事件，不适合动态生成的dom元素.

那么动态生成的元素应该怎么绑定事件呢, 采用如下方式：

$(function() {
  $('body').on('blur', '.comment-validate', function(item) {	 
	 $(this).css("border", "1px solid red");	 
  });
  
  $('body').on('focus', '.comment-validate', function(item) {
	  $(this).css("border", "1px solid #ccc");
  });
  
})

上面的例子就是针对有 comment-validate 这个样式的元素，绑定了blur,focus 事件. 即使这些元素是动态增加的，也一样能绑定上事件.

From：一号门