집 > 기사 > 웹 프론트엔드 > jquery에서 on과 click의 차이점은 무엇입니까?

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

亚连원래의: 2018-06-11 17:46:412242검색

이제 jquery를 기반으로 on과 click의 차이점에 대해 자세히 설명하겠습니다. 참고할 만한 가치가 있으니 모든 분들께 도움이 되길 바랍니다.

jQuery를 사용하여 js를 작성할 때 일부는 동작 함수를 작성하기 위해 on을 사용하고 일부는 클릭을 사용합니다. 둘의 차이점을 이해하는 것이 중요합니다.

다음은 둘의 차이점을 테스트하는 데 사용된 HTML 코드입니다.

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 <p>
  <h1>展示jQuery中on()和click()的区别</h1>
 </p>
 <p>
  <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span>
 </p>
 <p 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> 
 </p>
</body>
<script src="/static/js/jquery-3.1.1.min.js"></script>
<script src="/static/js/test.js"></script>
</html>

js 파일은 다음과 같습니다.

$("#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(); 
});

페이지가 로드된 후 NewOn 및 NewClick 버튼을 클릭하면 아래와 같은 페이지가 나타납니다.

현상:

뒤에 있는 삭제 버튼을 클릭하면 원본 HTML 요소가 삭제됩니다. 동적으로 추가된 HTML 요소는 click() 메소드를 사용하여 삭제 버튼을 클릭하여 삭제할 수 없으며 On() 메소드를 사용하여 삭제할 수 있습니다.

이유:

element.click()은 동적 요소나 스타일에 이벤트 바인딩을 지원하지 않습니다. 동적 요소에 대한 이벤트 바인딩 지원은 .live() 및 .on()입니다. jQquery 1.7 이후에는 Live가 더 이상 권장되지 않습니다. .on()을 사용하는 경우 페이지가 로드될 때 on 이전의 요소가 DOM에 존재해야 한다는 점에 유의하세요.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

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

관련 기사