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

2019-11-19 14:31:23

字體：大中小

來源：轉載

供稿：網友

使用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="/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按鈕，頁面如下圖所示。