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. Java 多线程之happens-before规则解释

    关于happens-before规则的解释网上有很多,我就不敢班门弄斧了.贴出两篇不错的文章以供学习. 1.happens-before俗解 2.深入Java内存模型--happen-before规则

  2. sql datalength与len区别用法

    原文:sql datalength与len区别用法 len ( string_expression )参数:要计算的字符串 len() 函数len 函数返回文本字段中值的长度. sql len() 语 ...

  3. 关于安装Redmine服务启动和邮件设置

    关于安装Redmine服务启动和邮件设置 分类: Redmine2009-06-01 10:37 5658人阅读 评论(0) 收藏 举报 authentication邮件服务器serviceexcha ...

  4. idea中output log4j中文乱码

    1.设置tomcat中的VM optins:-Dfile.encofing=UTF-8 2.idea安装目录bin文件夹中idea.exe.vmoptions.idea64.exe.vmoptions ...

  5. 开源Asp.Net MVC网上商城BrnShop

    开源Asp.Net MVC网上商城BrnShop正式发布,提供源码下载 BrnShop网上商城是以Asp.Net mvc3为基础开发的网上商城,源代码完全开源(企业版的源代码目前还没有完全整理完成,一 ...

  6. Extension Objects（扩展对象）

    设计模式之美:Extension Objects(扩展对象)   索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):使用示例结构实现 Extension Objects. 实现方 ...

  7. ArcGIS 10.1 发布使用ArcEngine自定义的GP服务

    1. 新建立GP模型 在VS2010中新建一个普通的程序及,引入ArcEngine相关的dll.在该DLL中定义一个或多个GP类和一个GP工厂类.GP类要继承IGPFunction2接口,GP工厂类要 ...

  8. 使用typeof方法反射属性和方法

    Type type = typeof(System.Int32);//获得int类型的Type对象 foreach (MethodInfo method in type.GetMethods())// ...

  9. RabbmitMQ集群搭建流程

    参考资料 1.rabbmitMQ集群搭建http://my.oschina.net/guol/blog/186445http://blog.ftofficer.com/2010/03/translat ...

  10. 编写简单的hashCode方法

    为什么要编写hashCode方法 hashCode在平时不常自己去编写,但是在真正高质量的代码中却是必不可少的. 看看Java中的Object对hashCode方法的描述: 1.返回对象的哈希码,是为 ...