.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. web 应用 为啥 需要用到 tomcat 之类的 部署

    首先了解C/s架构 比如我们常见的QQ,魔兽世界等 这种结构的程序是有服务器来提供服务的,客户端来使用服务 而B/S架构是这样的 它不需要安装客户端,只需要浏览器就可以了 例如QQ农场,这样对客户端的 ...

  2. CVPR2020|3D-VID:基于LiDar Video信息的3D目标检测框架

    作者:蒋天园 Date:2020-04-18 来源:3D-VID:基于LiDar Video信息的3D目标检测框架|CVPR2020 Brief paper地址:https://arxiv.org/p ...

  3. 2019-05-25 Python之Mongodb的使用

    Mongodb学习总结: one.插入数据pass two.查看数据pass three.修改数据pass four.数据排序pass five.删除数据pass 一.安装Mongodb https: ...

  4. util.Date与sql.Date的异同以及相互转换

    Java中有两个Date类 一个是java.util.Date通常情况下用它获取当前时间或构造时间 另一个是java.sql.Date是针对SQL语句使用的,它只包含日期而没有时间部分 两个类型的时间 ...

  5. docker环境常用命令

    Ubuntu 安装docker及docker-compose 安装: apt-get install docker apt-get install docker-compose 启动docker环境: ...

  6. testNG 断言

    testNG提供一个Assert类,来判断输出值是否与预期值一致,Assert常用的方法有: Assert.assertEquals():此方法可以有两个参数值,也可以有3个参数值,参数的顺序是 ac ...

  7. 华为鲲鹏服务器安装 k3s+rancher

    华为鲲鹏服务器安装 k3s+rancher 华为鲲鹏服务器 华为鲲鹏服务器采用华为自研cpu ARMv8架构,提供 Windows 和多个Linux 系统,作为服务器使用我一直使用Centos系统(不 ...

  8. chrome Provisional headers are shown错误提示（转载）

    今天开发时遇到了一个问题,由于要做一个支付等待页,大概的意思就是点击支付之后,跳出来一个页面,告知用户正在跳转到支付页面.这个时候问题来了,指鹤要做的这个静态支付等待页中有图片,而为了要让这个静态页面 ...

  9. 测试Thread中的常用方法

    package com.yhqtv.java; /* *测试Thread中的常用方法: * 1.start():启动当前线程:调用当前线程的run() * 2.run():通常需要重写Thread类的 ...

  10. Nagios基本搭建

    Nagios简述: 1.一款用来监视系统和网络的开源软件 2.利用其从多的插件实现对本机和远端服务的监控 3.当被监控对象异常时,回及时向管理员警告 4.提供一批预设好的监控插件,用户可以直接调用 5 ...