基于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解析获取JSON数据
Apr 08 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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
PHP的ASP防火墙
2006/10/09 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php中in_array函数用法分析
2014/11/15 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python datetime处理时间小结
2020/04/16 Python
pandas实现导出数据的四种方式
2020/12/13 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
软件配置管理有什么好处
2015/04/15 面试题
营业经理岗位职责
2013/11/10 职场文书
学子宴答谢词
2014/01/25 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
2015年大学生工作总结
2015/04/21 职场文书
消防演习通知
2015/04/25 职场文书
用Python创建简易网站图文教程
2021/06/11 Python