jquery 给动态生成的标签绑定事件的几种方法总结


Posted in jQuery onFebruary 24, 2018

经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了:

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<div id="d2">
			生成a标签
		</div>
		<div id="d3">
			<input type="button" value="生成a标签" id="btn" />
		</div>
	</body>
	<script>
		
		$(function(){
			$('#btn').bind('click', function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法对于动态添加的标签不好使,只对已经存在的静态标签好用
 			$('li').bind('click', function(event) {
			 alert("haha"); ///根本不会触发这个方法
 			});
		})
	</script>

点击按钮,就会在d2中添加一个li标签,这个可以。

但是,如果这样在初始化时,用bind方法给将来要动态生成的li标签绑定方法是无效的,点击生成的li标签,没有任何反应。

因为bind方法只能给在执行它时已经存在的静态标签jq对象绑定事件,对未来动态添加的标签是无效的。

这时,可以有几种方法来解决这个问题:

方法一:

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<div id="d2">
			动态生成a标签
		</div>
		
		<div id="d3">
			<input type="button" value="生成a标签" id="btn"/>
			
		</div>
	</body>
	<script>
		$(function() {
			///点击按钮,给d2动态添加标签
			$('#btn').bind('click', function() {
				/* 在添加标签的同时给添加的标签绑定点击事件 */
				$("<li onclick='show()'>Hello</li>").appendTo("#d2");
			});
	
		})
	
		function show() {
			alert($(this).text());///这样打印出的是空的,没有任何东西,但是方法是会触发的(不能这样打印自己)
			alert("哈哈");
		}
	</script>

这种方法是在动态拼接时就拼接好js原生的要触发的事件,然后把事件方法定义在script标签中。这种方法可以触发li的点击事件。但是如果要用alert($(this).text())这种打印标签自己本身信息的东西的方法,是没有任何结果显示的。这个即使是静态的标签打印自己也是不会有显示的。

要解决这个问题,可以用下面两种方法。

方法二:

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<div id="d2">
			生成a标签
		</div>
		
		<div id="d3">
			<input type="button" value="生成a标签" id="btn"/>
		</div>
	</body>
	<script>
		$(function(){
			$('#btn').bind('click', function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2").bind('click', function() {
			  /* 显示标签的内容 */
			  alert($(this).text()); ///这种方式也可以正常打印出 hello
			 });
 			});
 			
		})
	</script>

这种方式是可以解决上面问题的。虽然它用的也是bind方法,但是注意,它是先有目的标签对象然后才调用的bind方法,所以也是好用的。而且它居然可以正常打印自己的信息,非常厉害。

方法三:

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<div id="d1">
			测试静态标签的绑定方法
		</div>
		<br />
		
		<div id="d2">
			动态生成a标签的位置
		</div>
		<div id="d3">
			<input type="button" value="生成a标签" id="btn" />
		</div>
	</body>
	<script>
		$(function(){
			$('#btn').bind('click', function() {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法对于动态添加的标签不好使,只对已经存在的静态标签好用
 			///用live方法才好用
 			$('li').live('click', function() {
			 alert($(this).text());///注意,用live还可以这样写,结果是正常的
			 alert("haha");
 			});
 			
 			///通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
 			$('#d1').live('click', function() {///对于静态和动态创建的标签都好使
			 alert($(this).text());///注意,用live还可以这样写,结果是正常的.这是非常重要的
			 alert("haha");
 			});
		})
	</script>

这种就是用jq的非常好用的既可以动态也可以静态绑定现在或者未来各种标签的live方法。而且它最神奇的地方是也能 打印自己。我靠,太牛了。以后就用它了。

暂时还没发现这个live方法有什么弱点啊!

新手一枚,欢迎大神指正各种错误!

以上这篇jquery 给动态生成的标签绑定事件的几种方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 #jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 #jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
实现jquery放大镜的两种方法
Feb 22 #jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
You might like
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
JavaScript 事件系统
2010/07/22 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python 中random模块的常用方法总结
2017/07/08 Python
Python中实现switch功能实例解析
2018/01/11 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
python 爬取疫情数据的源码
2020/02/09 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
销售总监岗位职责
2014/01/04 职场文书
英文商务邀请信
2014/01/22 职场文书
爽歪歪广告词
2014/03/20 职场文书
教师批评与自我批评
2014/10/15 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
netty 实现tomcat的示例代码
2022/06/05 Servers
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers