基于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按钮，页面如下图所示。