jquery 給動態(tài)生成的標簽綁定事件的幾種方法總結

更新時間：2018年02月24日 09:21:37 作者：gebozhedao

下面小編就為大家分享一篇jquery 給動態(tài)生成的標簽綁定事件的幾種方法總結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

經常遇到給動態(tài)生成的標簽綁定事件不好用，自己簡單測試總結了下，結論如下了：

	<body>
		<!-- 下面是用純動態(tài)方式生成標簽 -->
		<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方法對于動態(tài)添加的標簽不好使，只對已經存在的靜態(tài)標簽好用
 			$('li').bind('click', function(event) {
			 alert("haha"); ///根本不會觸發(fā)這個方法
 			});
		})
	</script>

點擊按鈕，就會在d2中添加一個li標簽，這個可以。

但是，如果這樣在初始化時，用bind方法給將來要動態(tài)生成的li標簽綁定方法是無效的，點擊生成的li標簽，沒有任何反應。

因為bind方法只能給在執(zhí)行它時已經存在的靜態(tài)標簽jq對象綁定事件，對未來動態(tài)添加的標簽是無效的。

這時，可以有幾種方法來解決這個問題：

方法一：

<body>
		<!-- 下面是用純動態(tài)方式生成標簽 -->
		<div id="d2">
			動態(tài)生成a標簽
		</div>
		
		<div id="d3">
			<input type="button" value="生成a標簽" id="btn"/>
			
		</div>
	</body>
	<script>
		$(function() {
			///點擊按鈕，給d2動態(tài)添加標簽
			$('#btn').bind('click', function() {
				/* 在添加標簽的同時給添加的標簽綁定點擊事件 */
				$("<li onclick='show()'>Hello</li>").appendTo("#d2");
			});
	
		})
	
		function show() {
			alert($(this).text());///這樣打印出的是空的，沒有任何東西，但是方法是會觸發(fā)的（不能這樣打印自己）
			alert("哈哈");
		}
	</script>

這種方法是在動態(tài)拼接時就拼接好js原生的要觸發(fā)的事件，然后把事件方法定義在script標簽中。這種方法可以觸發(fā)li的點擊事件。但是如果要用alert($(this).text())這種打印標簽自己本身信息的東西的方法，是沒有任何結果顯示的。這個即使是靜態(tài)的標簽打印自己也是不會有顯示的。

要解決這個問題，可以用下面兩種方法。

方法二：

	<body>
		<!-- 下面是用純動態(tài)方式生成標簽 -->
		<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>
		<!-- 下面是用純動態(tài)方式生成標簽 -->
		<div id="d1">
			測試靜態(tài)標簽的綁定方法
		</div>
		<br />
		
		<div id="d2">
			動態(tài)生成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方法對于動態(tài)添加的標簽不好使，只對已經存在的靜態(tài)標簽好用
 			///用live方法才好用
 			$('li').live('click', function() {
			 alert($(this).text());///注意，用live還可以這樣寫，結果是正常的
			 alert("haha");
 			});
 			
 			///通過 live() 方法附加的事件處理程序適用于匹配選擇器的當前及未來的元素（比如由腳本創(chuàng)建的新元素）
 			$('#d1').live('click', function() {///對于靜態(tài)和動態(tài)創(chuàng)建的標簽都好使
			 alert($(this).text());///注意，用live還可以這樣寫，結果是正常的.這是非常重要的
			 alert("haha");
 			});
		})
	</script>

這種就是用jq的非常好用的既可以動態(tài)也可以靜態(tài)綁定現在或者未來各種標簽的live方法。而且它最神奇的地方是也能打印自己。我靠，太牛了。以后就用它了。

暫時還沒發(fā)現這個live方法有什么弱點啊！

新手一枚，歡迎大神指正各種錯誤！

以上這篇jquery 給動態(tài)生成的標簽綁定事件的幾種方法總結就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: