.on()方法比.bind()方法多一个参数selector

.on()的selector参数是筛选出调用.on()方法的dom元素的指定子元素，如：

$("ul").on('click','li', function(){})

为动态添加的元素也能绑上指定事件

案例：

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

    <script>

        $("ul li").bind('click', function() {

            alert("boom!");

        });

        // $("ul li").on('click', function() {

        //     alert("boom!");

        // });

        // 和上面效果一样

        $("ul").append("<li>5</li>");

    </script>

</body>

此时点击列表5并不会弹出消息框

给.on()添加selector参数li:

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

    <script>

        $("ul").bind('click','li', function() {

            alert("boom!");

        });

        $("ul").append("<li>5</li>");

    </script>

</body>

此时点击列表5弹出消息框boom!

jQuery中bind()与on()绑定事件的区别的更多相关文章

  1. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  2. jQuery中怎样阻止后绑定事件

    你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定.方法如下:$("#btn").click(function(){if( ...

  3. Jquery中bind和live.one,delegate的区别

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

  4. jQuery中append html后绑定事件不起作用

    事件一定要紧跟append之后, 否则append元素点击不起作用 $(function(){$('div').append('<ul><li id="appli" ...

  5. jQuery中bind与live的用法与区别

    首先介绍这两个方法之前,我们常用的是click()方法 $("a").click(function() { alert("hello"); }); click( ...

  6. JQuery中bind和unbind函数与onclick绑定事件区分

    JQuery中bind和unbind函数转载:   https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...

  7. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  8. jquery动态生成html代码绑定事件

    今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...

  9. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

随机推荐

  1. java nio消息半包、粘包解决方案

    问题背景 NIO是面向缓冲区进行通信的,不是面向流的.我们都知道,既然是缓冲区,那它一定存在一个固定大小.这样一来通常会遇到两个问题: 消息粘包:当缓冲区足够大,由于网络不稳定种种原因,可能会有多条消 ...

  2. 利用浏览器的console篡改cookie

    背景: 最近公司有个客户问题,是由于浏览器的cookie中多记录过期的session id导致重复登录,普通操作无法复现,因此尝试进行cookie篡改复现问题. 方法: 首先,要知道软件定义的sess ...

  3. B - Cow Marathon DFS+vector存图

    After hearing about the epidemic of obesity in the USA, Farmer John wants his cows to get more exerc ...

  4. 今天开始让我们一起来学JavaScript吧！（今天先扯先别的）

    1.为什么要学习JavaScript? 首先它是web开发人员必须学习的3门语言之一: ①HTML定义了网页的内容 ②CSS描述了网页的布局: ③JavaScript网页的行为 首先JavaScrip ...

  5. [转载]绕过CDN查找真实IP方法总结

    前言 类似备忘录形式记录一下,这里结合了几篇绕过CDN寻找真实IP的文章,总结一下绕过CDN查找真实的IP的方法 介绍 CDN的全称是Content Delivery Network,即内容分发网络. ...

  6. CTFHub web技能树 RCE

    一个简单的ping,还没有过滤,源码也给出来了 ls一下 127.0.0.1 & ls 有一个可疑的php文件,,,但是直接访问和 cat 都出不来... 试了几下反弹shell,没成功... ...

  7. selenium 时间等待的方法

    一.强制等待固定秒数 try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } 执行到sl ...

  8. java 一维数组的总结笔记

    数组 1. 一位数组的声明方式 type[] array Name 或 type arrayName[];(推荐使用第二种) 错误的声明方式 //int[5] intErrorArray;错误的 // ...

  9. tensorflow1.0 构建lstm做图片分类

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #this is data mni ...

  10. 在项目中部署redis的读写分离架构（包含节点间认证口令）

    #### 在项目中部署redis的读写分离架构(包含节点间认证口令) ##### 1.配置过程 ---  1.此前就是已经将redis在系统中已经安装好了,redis utils目录下,有个redis ...