jquery怎麼給動態產生的標籤綁定事件-js教程-PHP中文網

首頁

web前端

js教程

jquery怎麼給動態產生的標籤綁定事件

php中世界最好的语言

Mar 14, 2018 pm 04:31 PM

jquery 標籤產生

這次帶給大家jquery怎麼給動態產生的標籤綁定事件，jquery給動態產生的標籤綁定事件的注意事項有哪些，下面就是實戰案例，一起來看一下。

經常遇到給動態產生的標籤綁定事件不好用，自己簡單測試總結了下，結論如下了：

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

登入後複製

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

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

方法二：

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

登入後複製

這種方式是可以解決上面的問題。雖然它用的也是bind方法，但要注意，它是先有目的標籤物件然後才呼叫的bind方法，所以也是好用的。而且它居然可以正常列印自己的訊息，非常厲害。

方法三：

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d1">
			测试静态标签的绑定方法
		</p>
		<br />		
		<p id="d2">
			动态生成a标签的位置
		</p>
		<p id="d3">
			<input type="button" value="生成a标签" id="btn" />
		</p>
	</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>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7758

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

抖音標籤後面的時鐘是什麼？怎麼給抖音帳號打標籤呢？ Mar 24, 2024 pm 03:46 PM

在瀏覽抖音作品時，我們常常可以看到標籤後面有時鐘圖示。那麼，這個時鐘到底是什麼呢？本文將圍繞著「抖音標籤後面的時鐘是什麼」展開討論，希望為您的抖音使用提供一些有益的參考。一、抖音標籤後面的時鐘是什麼？抖音會推出一些熱門話題挑戰，用戶參與時會在標籤後看到一個時鐘圖標，這代表作品正在參與話題挑戰，並顯示挑戰的剩餘時間。對於一些具有時效性的內容，如假日、特殊活動等，抖音會在標籤後面附上時鐘圖標，提醒使用者該內容的有效期限。 3.熱門標籤：當某個標籤變得熱門時，抖音會在標籤後面加上時鐘圖標，表示這個標籤正

抖音怎麼帶標籤引流？平台什麼標籤最容易引流？ Mar 22, 2024 am 10:28 AM

抖音作為一款備受歡迎的短影片社群平台，擁有龐大的使用者群體。對於抖音創作者來說，標籤引流是一種有效提升內容曝光度和吸引關注的方法。那麼，抖音怎麼帶標籤引流呢？本文將為您詳細解答這個問題，並介紹相關技巧。一、抖音怎麼帶標籤引流？發布影片時，請確保選擇與內容相關的標籤。這些標籤應涵蓋影片的主題和關鍵字，以便讓用戶透過標籤更容易找到您的影片。利用流行標籤是增加影片曝光的有效方法。研究當前熱門標籤和趨勢，將其巧妙地融入影片描述和標籤中。這些熱門標籤通常具有更高的曝光度，能夠吸引更多觀眾的注意。 3.標籤

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

如何判斷jQuery元素是否具有特定屬性？ Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬

See all articles

jquery怎麼給動態產生的標籤綁定事件

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題