.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学习成长第一集

    由于最近所在项目组的项目临近结尾,所以有时间对自己近来的学习做个总结.不得不说,程序员不学习就退步这句话是真的很让人信服!自己入行将近一年的时间,所学的就是Java开发的专业,很羞愧的是现在的自己能力 ...

  2. harbor仓库搭建

    harbor安装要求 harbor快速部署 下载harbor:https://github.com/goharbor/harbor/releases 这边以harbor-1.8.2为例 [root@g ...

  3. ASE课程总结 by 林建平

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的辅助用户在阅读英文文献时记忆生词,提高用户的生词量,减少用户的阅读障碍.定义非常清晰,要有查 ...

  4. vue2.x学习笔记（二十）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12631279.html. 循环引用 递归组件 组件是可以在它们自己的模板中调用自身的,不过它们只能通过[name] ...

  5. python爬取优美图库海量图片，附加代码，一键爬取

    优美高清图片为大家提供高清美女套图赏析,非高清不录入,大家的网速要给力. 今天教大家爬取优美图库网站中高质量的图片!! 简单易上手哦~ 使用工具: Python 3.6 pycharm 相关环境: r ...

  6. 【arithmetic】搜索插入位置

    给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置 可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6], 5 输出: ...

  7. 关于unix环境高级编程、Linux程序设计两部书浅谈

    unix环境高级编程的术语很多,概念内容,也很多,不过学习概念性质.标准规则类的东西,想必都是这样吧——需要进行拓展的内容很多. Linux程序设计,图文并茂,代码量够足,看起来,感觉难度还可以. l ...

  8. phpstorm破解版

    查看下载:https://www.7down.com/soft/229568.html 破解:https://www.7down.com/article/305640.html 主题更换和下载:htt ...

  9. ip的运用

    1------获取ip$ip=$_SERVICE['REMOTE_ADDR'];2------根据ip获取主机名gethostbyaddr($ip);3------根据主机名获取IPgethostby ...

  10. BIOS和CMOS区别

    在网上看到一篇关于CMOS的文章,分享一下. 原文地址:http://jingyan.baidu.com/article/c843ea0b51155d77921e4a7a.html BIOS是什么? ...