jQuery-为动态添加的元素绑定事件即事件委托

最新推荐文章于 2023-03-08 14:46:38 发布

doublesXu

最新推荐文章于 2023-03-08 14:46:38 发布

阅读量349

点赞数

分类专栏： JQuery 文章标签： jquery 为动态添加的元素绑定事件事件委托

本文链接：https://blog.csdn.net/xyr0709/article/details/90545820

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在使用jquery的方式为元素绑定事件时，我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的方式请求远程数据来动态添加页面元素时，显然以上几种绑定事件的方式是无效的，具体写法如下图。

从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。

因为在此之前有bind(), live(),
delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

	//1、
	$(selector).bind(event,data,function)

	//2、
	$(selector).click(function)

	$("#searchMoveVideoResult ul li").bind("click",function(){
		$(this).css("border","5px solid #000");
	});
	$("#searchMoveVideoResult ul li").click(function(){
		$(this).css("border","5px solid #000");
	});

为动态添加的元素绑定事件有以下几种方式：

1.delegate()：向匹配元素的当前或未来的子元素附加一个或多个事件处理器

$(selector).delegate(childSelector,event,data,function)

目前大多数jquery版本都可用，不过我一般不用它。

	 $("#searchMoveVideoResult").delegate("ul li","click",function(){
		$(this).css("border","5px solid #000");
	});

	$("#searchMoveVideoResult").delegate("click","ul li",function(){
		$(this).css("border","5px solid #000");
	});

看出它们的不同了吗，第二种写法是错误的，记住一定要把事件写在元素的后面。

2.live()：为当前或未来的匹配元素添加一个或多个事件处理器
$(selector).live(event,data,function)

jquery1.8版本以前推荐使用该方法；jquery1.8版本之后就不建议使用了，我试了下，也是无效的，所以高版本的jquery推荐使用on()方法绑定事件。

	$("#searchMoveVideoResult ul li").live("click",function(){
		 $(this).css("border","5px solid #000");
	});

3.on()：适用于当前及未来的元素（比如由脚本创建的新元素）
$(selector).on(event,childSelector,data,function,map)

试验了下，大多数版本的jquery都是支持这个方法的，也是我比较喜欢使用的方法。

	$("#searchMoveVideoResult ul li").on("click",function(){
		$(this).css("border","5px solid #000");
	});

注一：比如有一些情况多次从后台获取动态内容到前台，点击的时候会触发多次，还要使用 $(“body”).undelegate(); 解除之前的绑定然后再一次重新绑定。

	//以delegate为例
	$("body").undelegate();
	$("body").delegate(".reply_check_btn", "click", function () {
	    alert('adsadsa');
	});

注二

	<body>
	    <p>第1行内容</p>
	    <p>第2行内容</p>
	    <p>第3行内容</p>
	    <script>
		    var appendhtml=document.createElement("p");
		    appendhtml.innerHTML="这是插入的内容";
		    document.body.appendChild(appendhtml);
		    var nodep=document.getElementsByTagName("p");
		    for (var i=0;i<nodep.length;i++){
				    nodep[i].onclick=function(){
				    console.log("Click Event!");
			    }
	    	}
	    </script>
    </body>

上面的代码是用原生的Javascript生成的，当此代码执行时，js会在页面中生成第四个P标签，且点击这四个标签的时候，都会触发相应的动作。那么是不是就是说，用js生成的HTML内容，都可以被绑定相应的事件呢？答案是否定的，在上面代码的script标签中，有两个代码段，代码段一是用来向HTML中插入内容的，代码段二是用来绑定事件的，如果把代码段一和代码段二互换位置，发现JS生成的第四个P标签没有绑定上click事件。此时可以用以上方法进行动态绑定事件

doublesXu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-为动态添加的元素绑定事件即事件委托

在使用jquery的方式为元素绑定事件时，我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的方式请求远程数据来动态添加页面元素时，显然以上几种绑定事件的方式是无效的，具体写法如下图。 //1、 $(selector).bind(event,data,function) //2、 $(selector).click(function) $(...
复制链接

扫一扫

专栏目录