on(type,[data],fn)

on有三个参数，type代表事件类型，可以为“click"、"onchange"、"mouseover"

data可以不传，如果传入data，可以在fn中以e.data取到

fn：函数，形参传入e，e.target可以拿到当前被点击的元素

delegate(selector,type,[data],fn)

selector:选择器

on(type,selector,[data],fn)

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>test2</title>

  </head>

  <body>

    <ul id="ul" style="padding:20px">

      <li>1</li>

      <li>2</li>

      <li>3</li>

      <li>4</li>

    </ul>

    <input type="button" value="add" id='add'>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript">

      $(function(){

        // $("#ul").bind("click",{name:"Annie"},function(e){

        //   console.log(e.target);

        //   console.log(e.data);

        // })

        $("#ul").delegate("li","click",{name:"Annie"},function(e){

          console.log(e.target);

          console.log(e.data);

        })

        // $("#ul").on("click","li",{name:"Annie"},function(e){

        //   console.log(e.target);

        //   console.log(e.currentTarget);

        //   console.log(e.data);

        // })

        $("#add").click(function(){

          console.log('add');

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

        })

      })

    </script>

  </body>

</html>

bind、delegate、on的区别的更多相关文章

  1. Jquery中bind和live的区别

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

  2. Bind和Eval的区别详解

    原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名& ...

  3. [jQuery]on和bind事件绑定的区别

    on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...

  4. bind,call,applay的区别

    方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { ...

  5. bind call apply 的区别和使用

    bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...

  6. 【转】jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  7. jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  8. live(),bind(),delegate()等事件绑定方法的区别及应用解析

    1 首先bind()方法是最直观的,但是也是弊端最大的. $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系,当我们 ...

  9. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  10. JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...

随机推荐

  1. OpenSSL拒绝服务漏洞（CNVD-2016-01479）

    更新OpenSSL版本. [root@nginx ~]# openssl version -a OpenSSL 1.0.1e-fips 11 Feb 2013 built on: Wed Mar 22 ...

  2. python爬虫中文乱码解决方法

    python爬虫中文乱码 前几天用python来爬取全国行政区划编码的时候,遇到了中文乱码的问题,折腾了一会儿,才解决.现特记录一下,方便以后查看. 我是用python的requests和bs4库来实 ...

  3. iClap助力移动互联网企业实现规范化管理

    移动互联网的迅速崛起,智能移动客户端深刻而全面地影响着人类生活与工作习惯.而企业办公已从原始的纸张办公,到固定PC办公,跨入到一个应用范围更广.效率更高的移动办公时代.由静生动,让企业办公更加人性化和 ...

  4. 2017 Multi-University Training Contest - Team 4 hdu6071 Lazy Running

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6071 题目: Lazy Running Time Limit: 2000/1000 MS (J ...

  5. java: -source 1.6 中不支持 switch 中存在字符串

    最近在使用IDEA进行单个文件编译的时候给我报错,如题. 解决办法:将 Modules --->Sources ---> Language level 改为 7.0就ok了.

  6. Linux CentOS6环境下MySQL5.1升级至MySQL5.5版本过程

    转载地址:http://www.laozuo.org/6145.html 老左今天有在帮朋友的博客搬迁到另外一台VPS主机环境,其环境采用的是LLSMP架构的,原先的服务器采用的是LNMP网站环境,其 ...

  7. Linux学习笔记之Xshell配色方案定制

    点击 Xshell 面板顶部的如下按钮. 点击 Browse 按钮,弹出如下面板,选择 ANSI Colors on Black,然后点击右侧save as 按钮,命名为 zkl.   这里其实就是复 ...

  8. CSS 媒体类型

    CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 一.媒体类型 一些CSS属性只设计了某些媒体.例如"voice ...

  9. 20145307《信息安全系统设计基础》第五周学习总结PT2

    20145307<信息安全系统设计基础>第五周学习总结PT2: 教材学习内容总结 之前有第一部分学习总结: http://www.cnblogs.com/Jclemo/p/5962219. ...

  10. 20145307JAVA学习期末总结

    20145307<Java程序设计>课程总结 每周读书笔记链接汇总 20145307 <Java程序设计>第一周学习总结:http://www.cnblogs.com/Jcle ...