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. Eclipse 使用技巧合辑

    修改Eclipse默认JDK "window"(窗口)---"Preferences.."(首选项),然后在弹出的对话框中的左边:选"Java&quo ...

  2. web.xml运行序列总结

    在整个订单<context-param>--<listener>--<filter>--<servlet>. 其中,内的各类别中的序列被运行.和< ...

  3. 使用Windows2003创建AD服务器 - 进阶者系列 - 学习者系列文章

    Windows 2003的AD功能不是很强,但是还是提供了不错的功能.下面简要介绍下Windows 2003的AD配置说明. 1.  从添加删除Windows组件安装AD功能项 2.  完成安装.这里 ...

  4. Office文档在线编辑的实现之一

    因为项目的关系,研究了一下Office的在线编辑功能,写出来共享一下. Office xp之后的版本支持通过webdav协议(http的扩展)直接编辑服务器上的文件. IIS(6.0)支持webdav ...

  5. 开辟html5和css3学习随笔（2015-3-2）

    1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  6. 个推推送 产品SDK常见问题检查

    作者:Hong Jack链接:https://zhuanlan.zhihu.com/p/20733333来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 通知和消息有什么 ...

  7. UrlRouting的理解

    UrlRouting的理解 文章内容 根据对Http Runtime和Http Pipeline的分析,我们知道一个ASP.NET应用程序可以有多个HttpModuel,但是只能有一个HttpHand ...

  8. Node填坑教程——常用库

    作为函数式编程来说,流程控制和函数库是必不可少的(应该吧). 下面我们介绍两个常用的库. lodash:完整的api请参阅,https://lodash.com/docs.这里我们只演示几个简单的例子 ...

  9. 轻量级IOC框架：Ninject

    Ninject 学习杂记 - liucy 时间2014-03-08 00:26:00 博客园-所有随笔区原文  http://www.cnblogs.com/liucy1898/p/3587455.h ...

  10. Helper Method

    ASP.NET MVC 小牛之路]13 - Helper Method 我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 Sys ...