jquery如何動(dòng)態(tài)生成標(biāo)簽綁定事件

這篇文章主要為大家展示了“jquery如何動(dòng)態(tài)生成標(biāo)簽綁定事件”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jquery如何動(dòng)態(tài)生成標(biāo)簽綁定事件”這篇文章吧。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)綏寧,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

結(jié)論如下了：

	<body>
		<!-- 下面是用純動(dòng)態(tài)方式生成標(biāo)簽 -->
		<div id="d2">
			生成a標(biāo)簽
		</div>
		<div id="d3">
			<input type="button" value="生成a標(biāo)簽" id="btn" />
		</div>
	</body>
	<script>
		
		$(function(){
			$('#btn').bind('click', function(event) {
			 /* 在添加標(biāo)簽的同時(shí)給添加的標(biāo)簽綁定點(diǎn)擊事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法對于動(dòng)態(tài)添加的標(biāo)簽不好使，只對已經(jīng)存在的靜態(tài)標(biāo)簽好用
 			$('li').bind('click', function(event) {
			 alert("haha"); ///根本不會(huì)觸發(fā)這個(gè)方法
 			});
		})
	</script>

點(diǎn)擊按鈕，就會(huì)在d2中添加一個(gè)li標(biāo)簽，這個(gè)可以。

但是，如果這樣在初始化時(shí)，用bind方法給將來要?jiǎng)討B(tài)生成的li標(biāo)簽綁定方法是無效的，點(diǎn)擊生成的li標(biāo)簽，沒有任何反應(yīng)。

因?yàn)閎ind方法只能給在執(zhí)行它時(shí)已經(jīng)存在的靜態(tài)標(biāo)簽jq對象綁定事件，對未來動(dòng)態(tài)添加的標(biāo)簽是無效的。

這時(shí)，可以有幾種方法來解決這個(gè)問題：

方法一：

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

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

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

方法二：

	<body>
		<!-- 下面是用純動(dòng)態(tài)方式生成標(biāo)簽 -->
		<div id="d2">
			生成a標(biāo)簽
		</div>
		
		<div id="d3">
			<input type="button" value="生成a標(biāo)簽" id="btn"/>
		</div>
	</body>
	<script>
		$(function(){
			$('#btn').bind('click', function(event) {
			 /* 在添加標(biāo)簽的同時(shí)給添加的標(biāo)簽綁定點(diǎn)擊事件 */
			 $("<li>Hello</li>").appendTo("#d2").bind('click', function() {
			  /* 顯示標(biāo)簽的內(nèi)容 */
			  alert($(this).text()); ///這種方式也可以正常打印出 hello
			 });
 			});
 			
		})
	</script>

這種方式是可以解決上面問題的。雖然它用的也是bind方法，但是注意，它是先有目的標(biāo)簽對象然后才調(diào)用的bind方法，所以也是好用的。而且它居然可以正常打印自己的信息，非常厲害。

方法三：

<body>
		<!-- 下面是用純動(dòng)態(tài)方式生成標(biāo)簽 -->
		<div id="d1">
			測試靜態(tài)標(biāo)簽的綁定方法
		</div>
		<br />
		
		<div id="d2">
			動(dòng)態(tài)生成a標(biāo)簽的位置
		</div>
		<div id="d3">
			<input type="button" value="生成a標(biāo)簽" id="btn" />
		</div>
	</body>
	<script>
		$(function(){
			$('#btn').bind('click', function() {
			 /* 在添加標(biāo)簽的同時(shí)給添加的標(biāo)簽綁定點(diǎn)擊事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法對于動(dòng)態(tài)添加的標(biāo)簽不好使，只對已經(jīng)存在的靜態(tài)標(biāo)簽好用
 			///用live方法才好用
 			$('li').live('click', function() {
			 alert($(this).text());///注意，用live還可以這樣寫，結(jié)果是正常的
			 alert("haha");
 			});
 			
 			///通過 live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素）
 			$('#d1').live('click', function() {///對于靜態(tài)和動(dòng)態(tài)創(chuàng)建的標(biāo)簽都好使
			 alert($(this).text());///注意，用live還可以這樣寫，結(jié)果是正常的.這是非常重要的
			 alert("haha");
 			});
		})
	</script>

這種就是用jq的非常好用的既可以動(dòng)態(tài)也可以靜態(tài)綁定現(xiàn)在或者未來各種標(biāo)簽的live方法。而且它最神奇的地方是也能打印自己。

以上是“jquery如何動(dòng)態(tài)生成標(biāo)簽綁定事件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：jquery如何動(dòng)態(tài)生成標(biāo)簽綁定事件
文章出自：http://jinyejixie.com/article16/jjicgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站制作、云服務(wù)器、品牌網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jquery如何動(dòng)態(tài)生成標(biāo)簽綁定事件