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() 的区别的更多相关文章

  1. tap 和click 事件区别

    clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...

  2. trigger click 和 click 的区别？？

    trigger click 和 user click 有什么区别吗? 好像没有的.直到发现了这样一段代码. <button class="btn1">Button< ...

  3. 不经意的小错误——onclick和click的区别

    可能注意不到的错误,编写jquery时发现没有自己想要的效果,结果通过代码比对软件才发现原来将click写成了onclick,虽然看着差不多,但意义却不相同,简单区别如下: $().click() 是 ...

  4. onclick与click的区别

    用法: Obj.click(function(){ }); Obj.onclick=function(){ } 相同:效果一样. 区别: 用户或浏览器执行的某种动作,例如click load,mous ...

  5. Android:Touch和Click的区别

    http://blog.csdn.net/hufeng882412/article/details/7310142 针对屏幕上的一个View控件,Android如何区分应当触发onTouchEvent ...

  6. jQuery中的on()和click()的区别 分类： 前端 HTML jQuery 2014-11-06 10:26 96人阅读 评论(0) 收藏

    HTML页面代码 <div> <h1>Click</h1> <button class="add">Click me to add ...

  7. 手机设备上touchstart与click的区别

    1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有 ...

  8. 移动端tap与click的区别 && 点透事件

    移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...

  9. $.on方法与$.click()的区别

    1.$.on("click") 支持动态元素绑定事件,该事件是绑定到document上,只要符合条件的元素即可绑定事件,同时$.on()可以绑定多个事件 on方法 on(event ...

随机推荐

  1. selenium IDE插件下载

    1.在https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/中下载Firefox的selenium-ide插件: 2.之后在Firef ...

  2. 《SQL 进阶教程》 case：在 UPDATE 语句里进行条件分支

    1.对当前工资为30万日元以上的员工,降薪10%:2.对当前工资为25万日元以上且不满28万日元的员工,加薪20% update salaries set salary = case when sal ...

  3. [题解]（折半搜索）luogu_P4799_BZOJ_4800世界冰球锦标赛

    抄的题解 以及参考:https://www.cnblogs.com/ZAGER/p/9827160.html 2^40爆搜过不了,考虑折半搜索,难点在于合并左右的答案,因为有可能答案同时载左右两边,我 ...

  4. CC13:回文链表

    题目 请编写一个函数,检查链表是否为回文. 给定一个链表ListNode* pHead,请返回一个bool,代表链表是否为回文. 测试样例: {1,2,3,2,1} 返回:true {1,2,3,2, ...

  5. [TCP/IP]ICMP和IGMP的区别

    ICMP(Internet 控制消息协议,Internet Control Message Protocol)协议用来给IP协议提供控制服务,允许路由器或目标主机给数据的发送方提供反馈信息.需要发送反 ...

  6. Net Core开源日志框架

    Net Core开源日志框架 Exceptionless - .Net Core开源日志框架 作者:markjiang7m2原文地址:https://www.cnblogs.com/markjiang ...

  7. Unbuntu 自动重启MySQL

    上个月,通过Unbuntu搭建了WordPress,一切运行良好. UBUNTU搭建WORDPRESS-MYSQL-APACHE 但是,最近几天,不知道啥情况,MySQL偶尔会出现Stop:影响了bl ...

  8. Eclipse Debug时出现Source not found错误

    今天在Debug Java代码时报出了Source not found这个错误,如下图所示,经过查询资料得知这是由于缺少Hadoop源程序代码所导致的错误. 在此我建议了两种方法,可以先采用方法一,这 ...

  9. Swing编程概述

    Swing作为AWT组件的“强化版”,它的产生主要是为了克服AWT构建的GUI,无法在所有平台都通用的问题.允许编程人员跨平台时指定统一的GUI显示风格也是Swing的最大优势.Swing是AWT的补 ...

  10. 公司项目git开发流程规范

    手动修改冲突之后,git add . git commit ,git push