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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jquery仿微信聊天界面
May 06 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
深入分析jQuery.one() 函数
Jun 03 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中删除、清空session的方式总结
2015/10/09 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JavaScript的目的分析
2007/01/05 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
Python urlopen 使用小示例
2008/09/06 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python中pow函数用法及功能说明
2020/12/04 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
业务员岗位职责
2013/11/16 职场文书
大气污染防治方案
2014/05/19 职场文书
目标责任书格式
2014/07/28 职场文书
八一建军节演讲稿
2014/09/10 职场文书
中秋节随笔
2015/08/15 职场文书
岗位聘任协议书
2015/09/21 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang