基于jquery的on和click的区别详解


Posted in jQuery onJanuary 15, 2018

使用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按钮,页面如下图所示。

基于jquery的on和click的区别详解

现象:

原先的HTML元素点击其身后的Delete按钮就会被删除。而动态添加的HTML元素,使用click()这种写法,点击Delete按钮无法删除;使用On()方式可以。

原因:

element.click()这种写法不支持给动态元素或样式绑定事件。支持给动态元素绑定事件的是.live()和.on()。live在jQquery1.7后就不推荐使用了。使用.on()时注意,on前面的元素必须在页面加载的时候就存在DOM里面。

以上这篇基于jquery的on和click的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python引用DLL文件的方法
2015/05/11 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python实现抖音点赞功能
2019/04/07 Python
python实现海螺图片的方法示例
2019/05/12 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
优秀创业计划书分享
2019/07/19 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL