基于jquery的on和click的區別詳解

來源：懂視網責編：小采時間：2020-11-27 22:21:33

基于jquery的on和click的區別詳解

基于jquery的on和click的區別詳解:使用jQuery寫js時，有些用on寫行為函數，有些用click，弄清二者區別很重要。以下是用于測試二者區別的HTML代碼。 <!DOCTYPE html> <%@ page language=java contentType=text/html; charset=UTF-8 page

推薦度：

點擊下載本文 文檔為doc格式

導讀基于jquery的on和click的區別詳解:使用jQuery寫js時，有些用on寫行為函數，有些用click，弄清二者區別很重要。以下是用于測試二者區別的HTML代碼。 <!DOCTYPE html> <%@ page language=java contentType=text/html; charset=UTF-8 page

使用jQuery寫js時，有些用on寫行為函數，有些用click，弄清二者區別很重要。

以下是用于測試二者區別的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>
 <div>
 <h1>展示jQuery中on()和click()的區別</h1>
 </div>
 <div>
 <span>點擊生成新按鈕。NewOn生成的Delete按鈕行為用on()實現，NewClick生成的Delete按鈕行為用click()實現。</span>
 </div>
 <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 src="https://www.gxlcms.com/static/js/jquery-3.1.1.min.js"></script>
<script src="https://www.gxlcms.com/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按鈕，頁面如下圖所示。