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. P1295-创意吃鱼

    题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...

  2. angularJs 指令调用父controller某个方法

    1.父级controller:例如有个 init() 方法; 父级与子级的通信数据是$scope.controlFlag={}; 那么可以在父级controller里这样写:$scope.contro ...

  3. RobotFramework学习笔记-Web自动化

    一.窗口关键字使用 1.当前浏览器弹出新的窗口 使用Select Window和Close Window处理弹出窗口.实际使用中Select Window不一定会一次选中,通常会结合Wait Unti ...

  4. maven settings.xml linux

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  5. 熔断 降级（polly）

    熔断 降级(polly) https://www.cnblogs.com/szlblog/p/9300845.html1.熔断降级的概念: 熔断:我这里有一根长度一米的钢铁,钢铁的熔点1000度(假设 ...

  6. shell 获得调用的python脚本的print值和错误log

    1. shell 获得调用的python脚本的print值 python test.py > out.log 2.shell 获得调用的python脚本的错误log python test.py ...

  7. python实现批量远程执行命令及批量上传下载文件

    #!/usr/bin/env python # -*- coding: utf- -*- # @Time : // : # @Author : xuxuedong # @Site : # @File ...

  8. WPF 动态加载主题由zip

    经典主题的方式 主题战略 加载速度 本机支持 (不需要额外的代码) 支持代码为主题 (捆绑代码 & 资源成单独的文件) 支持资源层次结构中导航 动态加载 动态卸载 轻松地编辑和编译 (不需要安 ...

  9. storm中的topology-worker-executor-task

    调度角色 调度方法 自定义调度 1 调度角色   任务角色结构 上图是JStorm中一个topology对应的任务执行结构,其中worker是进程,executor对应于线程,task对应着spout ...

  10. BZOJ4299: Codechef FRBSUM(主席树)

    题意 题目链接 数集S的ForbiddenSum定义为无法用S的某个子集(可以为空)的和表示的最小的非负整数. 例如,S={1,1,3,7},则它的子集和中包含0(S’=∅),1(S’={1}),2( ...