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. Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法

    (1)概括          一句话概括:根据显示屏幕宽度的大小,自动的选用对应的类的样式. (2)关键字段        1.col是column简写:列: 2.xs是maxsmall简写:超小,  ...

  2. 解决webSocke客户端连接服务端返回400错误

    原因: nginx使用了转发,头信息没设置全,问题出现在nginx的配置文件 解决办法: 修改nginx.conf配置文件,在linux终端敲入vim /etc/nginx/nginx.conf,找到 ...

  3. Java-GC-标记压缩算法

    标记压缩算法 其分为两个阶段标记阶段,和压缩阶段.其中标记阶段和标记清除算法的标记阶段是一样的. 对压缩算法来说,他的工作就是移动所有的可达对象到堆内存的同一区域中,使它们紧凑的排列在一起,从而将所有 ...

  4. Django之Form组件归类

    目录: Django内置字段 Django内置插件 常用选择插件 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; Field requi ...

  5. Debian 跨版本升级

    相对于某些重量级 Linux 发行版而言,同样是通过网络跨版本升级,Debian 的升级过程总要显得轻快很多.不会因为要下载数量惊人的软件包并安装而把升级时间拉得很长,也不用担心中途某些程序崩溃退出导 ...

  6. openstack安装newton版本neutron服务部署（四）

    一.管理节点部署服务: 1.安装neutron: [root@linux-node1 ~]# yum install openstack-neutron openstack-neutron-ml2 o ...

  7. springcloud-Netflix创建服务消费者

    目录 springcloud-Netflix创建服务消费者 Ribbon 创建服务消费者-Ribbon方式 ribbon的架构 Feign 创建包和基本项目结构 创建Feign访问服务的接口和访问co ...

  8. CentOS7.5 搭建mycat1.6.6

    1.环境及版本 操作系统:   CentOS 7.5 数据库:MySQL 5.7.23 jdk:1.8.0_191 mycat:1.6.6.1 cat /etc/centos-release mysq ...

  9. Oracle中文乱码，字符集问题处理

    1. 右键计算机,选择属性,增加环境变量 NLS_LANG:SIMPLIFIED CHINESE_CHINA.ZHS16GBK 2.进入注册表,依次单击HKEY_LOCAL_MACHINE --> ...

  10. babel7中 corejs 和 corejs2 的区别

    babel7中 corejs 和 corejs2 的区别 最近在给项目升级 webpack4 和 babel7,有一些改变但是变化不大.具体过程可以参考这篇文章 webpack4:连奏中的进化.只是文 ...