首頁 > web前端 > js教程 > jquery中on()與click()的差別是什麼?

jquery中on()與click()的差別是什麼?

青灯夜游
發布: 2020-11-30 17:18:04
原創
2001 人瀏覽過

區別:1、【click()】屬於靜態加載,當頁面加載完,就不在為新增加的元素添加點擊事件;2、【on()】屬於動態加載,當頁面加載完,可以為新增加的元素新增事件,但是必須選定父級元素。

jquery中on()與click()的差別是什麼?

相關推薦:《jQuery教學

jquery中on()與click ()的區別

  • click()屬於靜態加載,當頁面加載完,就不在為新增加的元素添加點擊事件。

  • on()屬於動態加載,當頁面加載完,可以為新增加的元素添加事件,但是必須選定父級元素。

二者在綁定靜態控件時沒有區別,但是如果面對動態產生的控件,只有 on() 能成功的綁定到動態控件中。

以下實例中原先的 HTML 元素點擊其身後的 Delete 按鈕就會被刪除。而動態新增的 HTML 元素,使用 click() 這種寫法,點選 Delete 按鈕無法刪除;使用 On() 方式可以。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
	</head>

	<body>	
		<h1>展示jQuery中on()和click()的区别</h1>

		<p>
			<span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现,NewClick生成的Delete按钮行为用click()实现。</span>
		</p>
		<div class="test">
			<button class="new" id="newon">NewOn</button> 
			<button class="new" id="newclick">NewClick</button>
			<ul class="li"> 
				<li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
				<li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
			</ul> 
		</div>
	</body>
		<script type="text/javascript">
			$("#newclick").click(function(){ 
				$(".li").append(&#39;<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>&#39;); 
			});
			$("#newon").click(function(){ 
				$(".li").append(&#39;<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>&#39;); 
			});
			$(".delete").click(function(){ 
				$(this).parent().remove(); 
			}); 
			
			$(".li").on(&#39;click&#39;, ".deleteon", function(){
				$(this).parent().remove(); 
			})
			$(".deleteclick").click(function(){ 
				$(this).parent().remove(); 
			});
		</script>
</html>
登入後複製

更多程式相關知識,請造訪:程式設計教學! !

以上是jquery中on()與click()的差別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板