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. 字符环（openjudge 2755）

    字符环 总时间限制: 1000ms   内存限制: 65536kB 描述 有两个由字符构成的环.请写一个程序,计算这两个字符环上最长连续公共字符串的长度.例如,字符串“ABCEFAGADEGKABUV ...

  2. 关于c语言中的字符串的问题

      静态数组,动态数组,链表是c语言中处理存储数据最基本的三种方式. 1.静态数组,你先定好大小,直接赋值即可,不要超过定义的长度. 2.动态分配数组,在执行的时候,输入要分的内存大小,然后p=(vo ...

  3. Android实现监听控件点击事件

    Android实现监听控件点击事件 引言 这篇文章主要想写一下Android实现监听点击事件的几种方法,Activity和Fragment实现起来有些方法上会有些不同,这里也略做介绍. 最近一直在忙一 ...

  4. 黑马SSM练习中 Oracle SQL代码

    -- 10张表 product member orders traveller order_traveller users role permission users_role role_permis ...

  5. C语言实现折半插入算法

    #include <stdio.h> int BInsertSort(int array[],int left,int right){ //接收主函数调用语句中的实参传到这里的形参里 in ...

  6. Django-Rest-Framework的版本和认证

    Django-Rest-Framework的版本和认证   restful framework DRF的版本 版本控制是做什么用的,我们为什么要用 首先要知道版本是干嘛用的,我们知道开发项目的时候有多 ...

  7. redis最佳实践

    总结: String类型的value(string/list/set/hash)使用StringRedisTemplate 其他类型的value(string/list/set/hash/object ...

  8. mysql8.0数据库忘记密码时进行修改方法

    最近安装mysql8.0数据库,用以前的修改mysql方法,没有成功,所以参考网上前辈的做法,自己重新整理了下忘记密码时进行修改方法 1.安装mysql8.0后发现,在安装目中,是没有my.ini 和 ...

  9. CoreCLR源码2

    CoreCLR源码 前一篇我们看到了CoreCLR中对Object的定义,这一篇我们将会看CoreCLR中对new的定义和处理new对于.Net程序员们来说同样是耳熟能详的关键词,我们每天都会用到ne ...

  10. JavaSE---悲观锁与乐观锁

    1.[悲观锁] 1.1 在数据处理的整个过程中,数据将处于锁定状态: 1.2 悲观锁的实现,依赖于数据库提供的锁机制(只有数据库提供的锁机制才能真正保证数据访问的排他性,否则,即使在系统中加锁机制,也 ...