.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. 【python实现卷积神经网络】全连接层实现

    代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...

  2. cwyth（自动核销代码）

    财务一体化系统,自动核销大数据代码: import pymysql import random import time #指定数据库地址.用户.密码.端口,使用connect()方法声明一个Mysql ...

  3. 永恒之蓝MS17010复现

    MS17010复现 靶机win7:192.168.41.150 攻击kali:   192.168.41.147 扫描 通过auxiliary/scanner/smb/smb_ms17_010模块扫描 ...

  4. [YII2] COOKIE的操作使用

    PHPcookie的设置 setcookie('username',$data['username'],time()+3600*24*7); YII2cookie的设置 $cookies = Yii: ...

  5. MySQL 查询语句优化思路

    query 语句的优化思路和原则主要提现在以下几个方面:1. 优化更需要优化的Query:2. 定位优化对象的性能瓶颈:3. 明确的优化目标:4. 从 Explain 入手:5. 多使用profile ...

  6. tp3.2 事务 和 tp5.0事务

    tp3.2: 来源:https://www.kancloud.cn/thinkphp-development/tp323/423369 和: https://blog.csdn.net/mengzuc ...

  7. JavaScript--'data-'的用法（1）

    HTML5为我们提供了一个强大的功能,前段也也能实现后台数据库的效果,例如data-xxx <a href="#myModal" data-industry_id=" ...

  8. ajax---post跨域思路

    ajax跨域需要加的代码 header("Access-Control-Allow-Methods:GET,POST");

  9. openssl查看证书细节 [转载]

    openssl x509部分命令 打印出证书的内容: openssl x509 -in cert.pem -noout -text 打印出证书的系列号 openssl x509 -in cert.pe ...

  10. Inno Setup: Ask for reboot after uninstall

     https://stackoverflow.com/questions/36497580/inno-setup-ask-for-reboot-after-uninstall   Use Uninst ...