on() 和 click() 的区别:

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  6. <script>
  7. $("#newclick").click(function(){
  8.     $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>');
  9. });
  10. $("#newon").click(function(){
  11.     $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>');
  12. });
  13. $(".delete").click(function(){
  14.     $(this).parent().remove();
  15. }); 
  16.  
  17. $(".li").on('click', ".deleteon", function(){
  18.     $(this).parent().remove();
  19. })
  20. $(".deleteclick").click(function(){
  21.     $(this).parent().remove();
  22. });
  23. </script>
  24. </head>
  25. <body>
  26. <h1>展示jQuery中on()和click()的区别</h1>
  27.  
  28. <p>
  29.     <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span>
  30. </p>
  31. <div class="test">
  32.     <button class="new" id="newon">NewOn</button>
  33.     <button class="new" id="newclick">NewClick</button>
  34.     <ul class="li">
  35.         <li>原先的HTML元素on<button class="deleteon">Delete</button></li>
  36.         <li>原先的HTML元素click<button class="deleteclick">Delete</button></li>
  37.     </ul>
  38. </div>
  39. </body>
  40. </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. cinder存储服务

    一.cinder 介绍: 理解 Block Storage 操作系统获得存储空间的方式一般有两种: 1.通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文件系 ...

  2. HTTPRunner实践二——数据驱动

    基于文档http://cn.httprunner.org/advanced/data-driven/ 场景一:用例集+独立参数+参数列表 1.原始用例文件savePatient_01.yml - co ...

  3. c#之quartz任务调度的使用

    这里讲下,quartz这种任务调度程序的简单使用 这是使用的quartz的3.x 版本 2.x 版本与此稍有区别,可以在网上查看2.x版本教程 使用语言为c# quartz的使用分为几个步骤 创建一个 ...

  4. java基础第八篇之jdk1.5、jdk1.7、jdk1.8新特性

    JDK5新特性 自动装箱和拆箱 泛型 增强for循环 静态导入 可变参数 枚举 枚举概述 是指将变量的值一一列出来,变量的值只限于列举出来的值的范围内.举例:一周只有7天,一年只有12个月等. 回想单 ...

  5. Sublime Text 快捷键的使用

    Sublime Text 快捷键的使用 快捷键列表(Shortcuts Cheatsheet) 我把本文出现的Sublime Text按其类型整理在这里,以便查阅. 通用(General) ↑↓←→: ...

  6. ES6入门教程---解构赋值和字符串扩展

    解构赋值: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 数组的解构赋值: 按照对应的顺序解构. var arr = [1,[2,3]]; ...

  7. Net Core构建Angular4应用程序

    在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序   前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1 ...

  8. css文本换行的问题

    今天敲代码的时候发现了一个一直都没太注意的小问题,当我在一个200px的div中写了一长串的‘f ‘时发现没有换行 但加上空格或标点符号后就能自动换行 原来浏览器把它当成了一串完整的单词,所以默认不换 ...

  9. JavaSE---基本网络支持

    1.Java为网络支持提供了java.net包,该包下的URL和URLConnection等类提供了 以编程方式访问WEB服务 的功能: 2.URLDecoder.URLEncoder提供了 普通字符 ...

  10. (转)Linux Network IO Model、Socket IO Model - select、poll、epoll

    Linux Network IO Model.Socket IO Model - select.poll.epoll  原文:https://www.cnblogs.com/LittleHann/p/ ...