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

bendan520 jquery

2023-09-01 0 8,190 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

我经常遇到绑定动态生成的标签难以使用的问题。我自己简单测试总结了一下，结论如下：

	
		
		
			生成a标签
		
		
			
		
	
	
		
		$(function(){
			$('#btn').bind('click', function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("Hello").appendTo("#d2");
 			});
 			
 			///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
 			$('li').bind('click', function(event) {
			 alert("haha"); ///根本不会触发这个方法
 			});
		})

单击该按钮将为 d2 添加一个 li 标签。这有效。

但如果在初始化时这样做，则使用bind方法绑定以后动态生成的li标签是无效的。点击生成的li标签不会有任何反应。

因为bind方法只能绑定执行时已经存在的静态标签jq对象，对于以后动态添加的标签无效。

这时解决这个问题的方法有以下几种：

方法一：


		
		
			动态生成a标签
		
		
		
			
			
		
	
	
		$(function() {
			///点击按钮，给d2动态添加标签
			$('#btn').bind('click', function() {
				/* 在添加标签的同时给添加的标签绑定点击事件 */
				$("Hello").appendTo("#d2");
			});
	
		})
	
		function show() {
			alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）
			alert("哈哈");
		}

该方法是动态拼接时拼接要触发的js原生storm，然后在script标签中定义storm方法。这个方法可以引发李的点击风暴。但如果你想使用alert($(this).text())打印标签本身的信息，则不会显示任何结果。虽然这是静态标签副本，但不会显示。

为了解决这个问题，可以使用以下两种方法。

方法二：

	
		
		
			生成a标签
		
		
		
			
		
	
	
		$(function(){
			$('#btn').bind('click', function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("Hello").appendTo("#d2").bind('click', function() {
			  /* 显示标签的内容 */
			  alert($(this).text()); ///这种方式也可以正常打印出 hello
			 });
 			});
 			
		})

这个方法可以解决前面的问题。虽然它也使用了bind方法，但请注意，它是在识别出目标标签对象之后调用的bind方法，因此使用起来很方便。而且它竟然能够正常复制自己的信息，这真是太神奇了。

方法三：


		
		
			测试静态标签的绑定方法
		
		

		
		
			动态生成a标签的位置
		
		
			
		
	
	
		$(function(){
			$('#btn').bind('click', function() {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("Hello").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");
 			});
		})

这是使用 jq 的一种非常有用的实时方式，可以动态或静态地绑定现在或将来的各种标签。最神奇的是它还可以自行打印。天哪，太棒了。从现在开始就会使用它。

我还没有注意到这个 live 方法有任何弱点！

我是新手jquery 事件动态绑定事件，有错误之处还请高手多多包涵！

以上总结的用jquery绑定动态生成标签的几种方式就是小编分享的全部内容。希望能给大家一个参考jquery 事件动态绑定事件，也希望大家多多支持Script Home。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!