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. 数以百万计美元的融资YO是什么东东？

    给自己做个广告哈,新栏目"面试"已经推出,回复"面试"就可以获取. 这两天最火的应用是什么.非yo莫属,堪称史上最简单的社交应用,仅仅能向好友发送一个yo. 出 ...

  2. Android 使用Gson解析json案例具体解释

    一.眼下解析json有三种工具:org.json(Java经常使用的解析),fastjson(阿里巴巴project师开发的),Gson(Google官网出的),解析速度最快的是Gson,下载地址:h ...

  3. mysql 基础之CURD

    原文:mysql 基础之CURD 增删改查基本语法学习 增: insert Insert 3问: 1: 插入哪张表? 2: 插入哪几列? 3: 这几列分别插入什么值? Insert into Tabl ...

  4. android的版本控制

    在一个团队项目中,项目的版本控制,一方面促进团队的协同能力,另一方面提高项目的进度 即使一个人的项目也最好使用SVN这样的版本控制,可以清楚的知道自己的修改的代码,和项目进度等.合理的托管,也让优秀的 ...

  5. des和Rijndael加密

    ------------IV的作用: 为了保证数据的安全,.NET基类库中提供的私钥算法类使用称作密码块链(CBC,Cipher Block Chaining)的链模式,算法使用一个密钥和一个初始化向 ...

  6. slice、substring、substr的区别

    首先它们都接收两个参数,slice和substring接收的是起始位置与结束位置,而substr接收的是起始位置和所要截取的字符长度.   特殊注意: 当第二参数大于第一个参数时,slice会返回空字 ...

  7. JavaScript精彩范例(1)——Jquery EasyUI应用的一个框架实例

    从网上看到的,非常漂亮,放在这里和大家分享一下,作者是疯狂秀才 这是截图 >>这是下载地址<<

  8. Fitnesse集成TestLink

    TestLink作为开源测试管理工具,可以进行测试工程.测试计划以及执行计划的管理,而且TestLink团队提供了XML-PRC的接口供第三方工具调用,接口支持程度也比较好. Fitnesse作为开源 ...

  9. HTTP/1.1与HTTP/1.0的区别

    HTTP/1.1与HTTP/1.0的区别 下面主要从几个不同的方面介绍HTTP/1.0与HTTP/1.1之间的差别,当然,更多的内容是放在解释这种差异背后的机制上. 1 可扩展性 可扩展性的一个重要原 ...

  10. UVA 10391 Compound Words

    Problem E: Compound Words You are to find all the two-word compound words in a dictionary. A two-wor ...