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

摘要: 在用jquery的时候,经常会动态生成一些dom,并希望动态绑定事件,不采用硬编码绑定事件的方法去实现.

用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 事件. 即使这些元素是动态增加的,也一样能绑定上事件.


上一篇: 一号门django CMS 2021版预览
下一篇: java获取文件扩展名的误区
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章或者资源来源于互联网, 有时候很难判断是否侵权, 若有侵权, 请联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布无版权争议的 文章/资源.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号