집 >웹 프론트엔드 >JS 튜토리얼 >jquery에서 on과 click을 사용하는 방법

jquery에서 on과 click을 사용하는 방법

php中世界最好的语言원래의: 2018-03-15 10:31:584308검색

이번에는 jquery에서 on과 click을 사용하는 방법과 jquery에서 on과 click을 사용할 때의 notes는 무엇인지 알아보겠습니다.

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('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
});
$("#newon").click(function(){ 
 $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 
});
$(".delete").click(function(){ 
 $(this).parent().remove(); 
}); 
$(".li").on('click', ".deleteon", function(){
 $(this).parent().remove(); 
})
$(".deleteclick").click(function(){ 
 $(this).parent().remove(); 
});

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

현상:

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

이유:

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!