jquery에서 on()과 click()의 차이점은 무엇입니까?-JS 튜토리얼-php.cn

jquery에서 on()과 click()의 차이점은 무엇입니까?

青灯夜游

풀어 주다： 2020-11-30 17:18:04

원래의

1968명이 탐색했습니다.

차이점: 1. [click()]은 페이지가 로드될 때 새로 추가된 요소에 대해 클릭 이벤트가 더 이상 추가되지 않습니다. 2. [on()]은 페이지가 로드될 때 적용됩니다. 로드된 경우 새 요소에 대한 클릭 이벤트를 추가할 수 있지만, 상위 요소를 선택해야 합니다.

jquery에서 on()과 click()의 차이점은 무엇입니까?

관련 권장사항: "jQuery Tutorial"

jquery

click()에서 on()과 click()의 차이점은 static에 속합니다. 페이지가 로드되면 새로 추가된 요소에 대한 클릭 이벤트가 더 이상 추가되지 않습니다. click()属于静态加载，当页面加载完，就不在为新增加的元素添加点击事件。
on()

on()은 페이지가 로드될 때 새로 추가된 요소에 대한 이벤트를 추가할 수 있지만 상위 요소를 선택해야 합니다.

정적 컨트롤을 바인딩할 때는 둘 사이에 차이가 없지만, 동적으로 생성된 컨트롤이 있는 경우 on()만 동적 컨트롤에 성공적으로 바인딩할 수 있습니다.

다음 예에서는 뒤에 있는 삭제 버튼을 클릭하면 원본 HTML 요소가 삭제됩니다. 동적으로 추가된 HTML 요소의 경우 click() 메서드를 사용하면 삭제 버튼을 클릭하여 삭제할 수 없으며 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!