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. linux mysql备份

    许多备份方案: http://blog.jobbole.com/14012/ 采用的: mysqldump ---user admin ---password=password mydatabase ...

  2. Yii 2.x 和1.x区别以及yii2.0安装

    知乎上有个类似的问题:http://www.zhihu.com/question/22924271/answer/23085751 大致思路不会变,开发流程变化也不是很大.有变化的是1.yii2带入的 ...

  3. Ajax跨域请求 同源策略与Jsonp

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

  4. AlphaControls的使用方法

    AlphaControls的使用方法 转载▼   一.安装方法:  1.解压缩下载的文件,并把它放到你希望的位置,例如 D:\Coder\   2.在Delphi的菜单:Tools->Envir ...

  5. ZenCart分类数量打折Category Quantity Discount插件

    附件:http://files.cnblogs.com/lzj87980239/Category_Quantity_Discount.rar 效果图后台1.将update.sql导入到数据库 2.将Y ...

  6. Java基础知识陷阱(二)

    本文发表于本人博客. 上次说了一些关于字符串的知识,都是比较基础的,那这次也说下关于对象地址问题,比如传参.先看下面代码: public void changeInt(int a){ a = ; } ...

  7. Java设计模式—单例模式

    Singleton是一种创建型模式,指某个类采用Singleton模式,则在这个类被创建后,只可能产生一个实例供外部访问,并且提供一个全局的访问点. 核心知识点如下: (1) 将采用单例设计模式的类的 ...

  8. angular-selcet

    常规用法代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. 论文笔记：多标签学习综述（A review on multi-label learning algorithms）

    2014 TKDE(IEEE Transactions on Knowledge and Data Engineering) 张敏灵,周志华 简单介绍 传统监督学习主要是单标签学习,而现实生活中目标样 ...

  10. oracle安装完成后目录中不论有没有tnsnames.ora和listener.ora文件 PLSQL都能连上的问题解决方法

    今天遇到这个问题了,发现listener.ora文件和tnsnames.ora文件在Net Work文件夹下没有,正常情况下安装完oracle或者是oracle Client是会有的,但是在Net M ...