on() 和 click() 的区别
on() 和 click() 的区别:
二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。
以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
$("#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();
});
</script>
</head>
<body>
<h1>展示jQuery中on()和click()的区别</h1> <p>
<span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span>
</p>
<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>
</html>
on() 和 click() 的区别的更多相关文章
- tap 和click 事件区别
clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...
- trigger click 和 click 的区别？？
trigger click 和 user click 有什么区别吗? 好像没有的.直到发现了这样一段代码. <button class="btn1">Button< ...
- 不经意的小错误——onclick和click的区别
可能注意不到的错误,编写jquery时发现没有自己想要的效果,结果通过代码比对软件才发现原来将click写成了onclick,虽然看着差不多,但意义却不相同,简单区别如下: $().click() 是 ...
- onclick与click的区别
用法: Obj.click(function(){ }); Obj.onclick=function(){ } 相同:效果一样. 区别: 用户或浏览器执行的某种动作,例如click load,mous ...
- Android:Touch和Click的区别
http://blog.csdn.net/hufeng882412/article/details/7310142 针对屏幕上的一个View控件,Android如何区分应当触发onTouchEvent ...
- jQuery中的on()和click()的区别 分类： 前端 HTML jQuery 2014-11-06 10:26 96人阅读 评论(0) 收藏
HTML页面代码 <div> <h1>Click</h1> <button class="add">Click me to add ...
- 手机设备上touchstart与click的区别
1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有 ...
- 移动端tap与click的区别 && 点透事件
移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...
- $.on方法与$.click()的区别
1.$.on("click") 支持动态元素绑定事件,该事件是绑定到document上,只要符合条件的元素即可绑定事件,同时$.on()可以绑定多个事件 on方法 on(event ...
随机推荐
- Mac下IDEA不能进行编辑
在安装Idea时,在选择插件的时候,把IDEAVim这个玩意儿选上了. 所以,编辑模式就跟命令行里面的Vim一样.输入时,需要先输入i, 进入insert模式下,然后才可以编辑. 彻底解决办法就是进入 ...
- python 定位
#字符串定位 使用str.find() 其结果为如下: #列表中元素的定位 使用list.index() 其结果如下:
- HTTP2 Sampler for JMeter
今天开发大大说能不能帮忙压一下HTTP2的链接,便去查了一下相关的东西. HTTP 2.0 的出现,相比于 HTTP 1.x ,大幅度的提升了 web 性能.在与 HTTP/1.1 完全语义兼容的基础 ...
- CC12:链式A+B
题目 有两个用链表表示的整数,每个结点包含一个数位.这些数位是反向存放的,也就是个位排在链表的首部.编写函数对这两个整数求和,并用链表形式返回结果. 给定两个链表ListNode* A,ListNod ...
- HDU 1087 E - Super Jumping! Jumping! Jumping! DP
http://acm.hdu.edu.cn/showproblem.php?pid=1087 设dp[i]表示去到这个位置时的最大和值.(就是以第i个为结尾的时候的最大值) 那么只要扫描一遍dp数组, ...
- 第十六章 提升用户体验 之 设计实现routes
1. 概述 ASP.NET MVC route 用来把URL映射到方法中的action,是用户和程序之间的桥梁. 本章内容包括:定义route处理URL Pattern.应用route限制.忽略URL ...
- Java中的switch语句——通过示例学习Java编程（8）
作者:CHAITANYA SINGH 来源:https://www.koofun.com//pro/kfpostsdetail?kfpostsid=19 当我们在代码逻辑中有多个选项,而且需要为每个选 ...
- JSON（未完待续，等讲到对象时再加）
1 定义 JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言:JSON 使用 Jav ...
- 好吧，不说闲言碎语，不抱怨，好好工作，好好学习，多总结。记录一下昨天做vuejs的心得
1.做了两个bat文件,一个是直接定位到vuejs项目并且运行,另一个就是打包 run.bat d:cd wwwcd vuecd dtbpmcnpm run devpause build.bat cd ...
- Kendo 单页面应用(一)概述
Kendo 单页面应用(一)概述 Kendo 单页面应用(Single-Page Application,缩写为 SPA)定义了一组类用于简化 Web 应用(Rich Client)开发,最常见的单页 ...