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. 08 网络配置、shh服务、bash命令和元字符

    作业一:完成作业未做完的集群架构作业二:临时配置网络(ip,网关,dns)+永久配置 作业三:为集群内的机器设定主机名,利用/etc/hosts文件来解析自己的集群中所有的主机名,相应的,集群的配置应 ...

  2. C# 各种导入 Excel 文件的数据的方法总结

    在导入之前都需要将上传的文件保存到服务器,所以避免重复的写这些代码,先贴出上传文件并保存到服务器指定路径的代码. protected void btnImport_Click(object sende ...

  3. web前端基础——初识HTML

    1 HTML概念 HTML(Hypertext Markup Language)即超文本标记语言,是网页的描述语言.它其实是一种描述网页的标准,它通过给需要描述的内容加上标签,浏览器按照HTML语言的 ...

  4. Linux查找含有某字符串的文本文件

    转自:http://www.cnblogs.com/wangkongming/p/4476933.html 如果你想在当前目录下 查找"hello,world!"字符串,可以这样 ...

  5. python3_pickle模块详解

    python3 pickle持久化的储存数据. python程序运行中得到了一些字符串,列表,字典等数据,想要长久的保存下来,方便以后使用,而不是简单的放入内存中关机断电就丢失数据.python模块大 ...

  6. context.Request方法总结

    Request.Params为获取的包含上述两种集合外,还包括当前运行环境变量,COOKIES等的集合.Request.QueryString["param"] getReques ...

  7. Centos75 解决Nginx出现403 forbidden(13: Permission denied)

    Centos75 新安装的vm,nginx出现403 forbidden 一般为SELinux设置为开启状态(enabled)的原因 切为root ,执行: sed -i 's/SELINUX=enf ...

  8. GIT使用—分支与合并

    一.分支名 分支名不能以斜线结尾 分支名不能以减号开头 以斜杠分割的组件不能以点开头(feature/.new) 分支名的任何地方都不能包含连个连续的点 分支名不能包含空格或空白符 分支名不能包含波浪 ...

  9. 20145216史婧瑶《Java程序设计》第7周学习总结

    20145216 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1 认识时间与日期 就目前来说,即使标注为GMT(无论是文件说明,或者是API的日期时间 ...

  10. 20145329 《Java程序设计》实验二总结

    实验指导教师:娄嘉鹏老师 实验日期:2016.4.12 实验时间:15:30~17:30 实验序号:实验二 实验名称:Java面向对象程序设计 实验目的与要求: 1.初步掌握单元测试和TDD 2.理解 ...