on和bind事件绑定的区别

一个demo展示

<!DOCTYPE html>

<html lang="zh">

<head>

    <title>Document</title>

</head>

<body>

    <ul id="u1">

        <li>click</li>

        <li>click</li>

        <li>click</li>

    </ul>

    <ul id="u2">

        <li>click</li>

        <li>click</li>

        <li>click</li>

    </ul>

    <script type="text/javascript" src="lib/jquery-1.9.0.js"></script>

    <script type="text/javascript">

        $(function(){

            $('#u1 li').bind('click',function(){

                console.log('bind');

            });

            $('#u2').on('click','li',function(){

                console.log('on');

            });

            //此时的他们是没有区别的

            //直到在我们动态的插入一段html到文档

            $('#u1').append('<li>new</li>');

            $('#u2').append('<li>new</li>');

            //这个时候u1新插入的li没有被绑定事件

            //u2新插入的li事件正常运行

        });

    </script>

</body>

</html>

[jQuery]on和bind事件绑定的区别的更多相关文章

  1. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  2. 微信小程序（16）-- bindtap,catchtap事件绑定的区别

    bindtap,catchtap事件绑定的区别,这里就涉及冒泡事件了.bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡. logs.wxml <view cl ...

  3. [HTML5]原生事件绑定和jquery动态事件绑定的区别

    原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...

  4. 【JQuery源码】事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  5. JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)

    转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html 1.ZeroClipboard其实是国外的一个js类库,源码结构如: var Zer ...

  6. jquery中的DOM事件绑定与解绑

    在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...

  7. jquery 新建的元素事件绑定问题

    js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮, ...

  8. jquery 新建的元素事件绑定问题研究[转]

    原文:http://www.cnblogs.com/linzheng/archive/2010/10/17/1853568.html js的事件监听跟css不一样,css只要设定好了样式,不论是原来就 ...

  9. [Web 前端] 027 jQuery 相关尺寸与事件绑定

    1. 相关尺寸 1.1 获取元素相对于文档的偏移量 var pos = $('#small').offset(); console.log(pos.left, pos.top); 1.2 获取当前元素 ...

随机推荐

  1. 使用c#给outlook添加任务、发送邮件

    原文:使用c#给outlook添加任务.发送邮件 c#在使用outlook提供的一些API时,需要将outlook相关的com引用到项目中. 具体方法就是用vs打开工程后,在工程上添加引用,在com选 ...

  2. Spring IOC 之ApplicationContext的其他功能

    正如上面章节所介绍的那样, org.springframework.beans.factory 包提供了管理和操作beans的 基本功能. org.springframework.context包增加 ...

  3. 文件合并工具DiffMerge发布4.2版本

    DiffMerge一直是文件对比合并工具的佼佼者,其最大特点是多文件对比与合并,并提供可视化界面用于编辑. 此次DiffMerge v4.2发布,提高了文件差异对比,并提供了快速匹配功能,以及更好的用 ...

  4. OCP-1Z0-051-题目解析-第3题

    3. You need to extract details of those products in the SALES table where the PROD_ID columncontains ...

  5. 编写高效的jQuery代码

    http://www.css88.com/jqapi-1.9/ 编写高效的jQuery代码 最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上 ...

  6. Unity SurfaceShader 开始编程

    Unity SurfaceShader 开始编程 在14年年初的时候,以前给自己定下了今年要实现的三个目标.当中之中的一个就是学会编写自己的Shader,并可以投入到实际的项目应用之中.如今,转眼间日 ...

  7. 从Http它被连接到WebSocket

    1.HTTP协议长期-fi支持和各支持的浏览器 http://blog.csdn.net/fenglibing/article/details/7100222 2.WEBclient与服务端信息交互的 ...

  8. WebService它CXF这三个音符（Service接口实现类）

    ITeacherServiceImpl.java: /** * @Title:ITeacherServiceImpl.java * @Package:com.you.service.impl * @D ...

  9. mvc+EF比较好的框架

    个人看了传智播客的一位讲师搭建的框架感觉很好,就自己通过模仿划了一下很不讲究的类图来学习之间的关系(有些地方可能有自己理解不对的地方).很感激那位讲师,我会把这个框架用在我自己的项目中.

  10. NodeJs技术

    我的NodeJs技术总结——第一篇   既然是我的技术总结,那就是以我的技术水平为基础的,写浅了大家不要笑话,如果有错误的地方还望指正. 这第一篇就谈谈NodeJs的一些编程细节吧. 1.遍历数组 f ...