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. Python开发环境Wing IDE使用教程：部分调试功能介绍

    下面是用户应该了解的Wing IDE的其它一些调试功能: Main Debug File—用户可以指定项目中的一个文件作为调试的主入口点.当完成这个设置之后,调试总是从这个文件开始,除非用户使用Deb ...

  2. 分析Java因为语言慢

    Java在早期的(例JDK1.2一旦)这是很慢.也许是因为有很多的优化,以提高装置的版本号,Java这是越来越快,所以这是现在非常的Java和C/C++什么什么慢速争议. 我想我自己的理解.谈论的影响 ...

  3. Android Intent 三解决

    Intent的接收处理: 1.Receiver报名 这之前已经被引入 然后看看剩下的两个接收功能上面. scheduleReceiver scheduleRegisteredReceiver: sch ...

  4. MSSQL2008数据库备份还原和数据恢复

    原文:MSSQL2008数据库备份还原和数据恢复   序言 一直想写一篇关于数据库备份与恢复的文章,但基于能力的有限对数据库认知的有限怕不足以准确的表达,最后思考很久还是决定把自己的一些理解写出来供大 ...

  5. wcf消息模式（随记）

    ----------------------------------------------消息模式:1.request\reply(默认)2.one-way(单工)[Isoneway=true]客户 ...

  6. WebService和AngularJS实现模糊过滤查询

    WebService和AngularJS实现模糊过滤查询   [概要] 网上看到一个不错的帖子,用WebService获取json,然后在前端使用AngularJs进行过滤搜索,看完文章后,按自己的想 ...

  7. NET系列文章

    NET系列文章 由于博主今后一段时间可能会很忙(准备出书:<.NET框架设计—模式.配置.工具>,外加换了新工作),所以博客会很少更新: 在最近一年左右时间里,博主各种.NET技术类型的文 ...

  8. Web应用架构的新趋势

    系统架构:Web应用架构的新趋势---前端和后端分离的一点想法   最近研究servlet,看书时候书里讲到了c/s架构到b/s架构的演变,讲servlet的书都很老了,现在的b/s架构已经不是几年前 ...

  9. 10-18 noip提高组模拟赛(codecomb)T2贪心

    T2:找min:一直找最小的那个,直到a[i]-x+1小于0,就找次小的,以此类推: 求max,也是一样的,一直到最大的那个,直到次大的比之前最大的大,就找次大的: 这个模拟,可以用上priority ...

  10. Forms Authentication in ASP.NET MVC 4

    原文:Forms Authentication in ASP.NET MVC 4 Contents: Introduction Implement a custom membership provid ...