.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. Mac Jenkins+fastlane 简单几步实现iOS自动化打包发布 + jenkins节点设置

    最近在使用jenkins 实现ios自动化打包发布蒲公英过程实践遇到了一些坑,特意记录下来方便有需要的人. 进入正题: 一.安装Jenkins 1.Mac上安装Jenkins 遇到到坑 因为 Jenk ...

  2. 记录：如何使用ASP.NET Core和EnityFramework Core实现服务和数据分离

    前情提要: 现有一个网站框架,包括主体项目WebApp一个,包含 IIdentityUser 接口的基架项目 A.用于处理用户身份验证的服务 AuthenticationService 位于命名空间B ...

  3. Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(八)之Reusing Classes

    The trick is to use the classes without soiling the existing code. 1. composition--simply create obj ...

  4. DataGridView编辑状态自动提交

    在使用bindingSource.bindingNavigator+DataGridView修改时会发现,当你需要保存修改过后的内容,必须将光标指向另外一行,DataGridView才会将编辑过后的数 ...

  5. SpringBoot 集成 Elasticsearch

    前面在 ubuntu 完成安装 elasticsearch,现在我们SpringBoot将集成elasticsearch. 1.创建SpringBoot项目 我们这边直接引入NoSql中Spring ...

  6. Vulnhub-dpwwn-01靶机过关记录

    靶机地址:172.16.1.192 Kali 目录扫描 查看info.php 端口扫描 开放3306,尝试弱密码或爆破mysql. 账户为root,密码为空,成功登陆. 查看数据库:再查看ssh表 查 ...

  7. NGINX 类漏洞 整理记录

    简单介绍NGINX: Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行. 其特点是占有内存少,并发能力强,nginx的并 ...

  8. shiro：加密及密码比对器（三）

    基于[自定义remle(二)]项目增加加密功能 1:数据库t_user表增加一列(盐) 增加字段:salt CREATE TABLE `t_user` ( `id` int(11) NOT NULL ...

  9. Nacos - 阿里开源配置中心

    配置中心相信大家都有听过,zookeeper.apollo等等都是配置中心的代表,但大部分都是JAVA系为主的,笔者主要开发语言使用的是Golang当然也有类似于ETCD这样的组件,但是并不方便管理也 ...

  10. pytorch seq2seq模型训练测试

    num_sequence.py """ 数字序列化方法 """ class NumSequence: """ ...