语法

$(selector).on(event,childSelector,data,function,map)
参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值。必须是有效的事件。

childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

1.绑定一个事件

$(document).on("click","#id",funciton(){

  alert("come here");

})

2.多事件绑定同一函数

  $("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});

3.绑定多个事件,绑定多函数

$(document).on({
  "mouseover": function () {
    $(this).css("background", "#000")

    //这里的$(this)指的是#id
  },
  "click": function () {
    $(this).css("height","100px")
  },
  "mouseout": function () {
    $(this).css("background", "red")
  }
}, "#id")

4.传递数据到函数

$("body").on({
  "click": toShow
  }, { name: "my name is sunnie" })
function toShow(info) {
  alert(info.data.name)
}

5.如果你需要移除on()所绑定的方法,可以使用off()方法处理。

$(document).ready(function(){
  $("p").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("button").click(function(){
    $("p").off("click");
  });
});

jquery绑定事件on的用法的更多相关文章

  1. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...

  2. jQuery绑定事件-多种方式实现

    jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...

  3. jQuery绑定事件的on()

    jQuery绑定事件 语法:$(selector).on(event,childselector,function(){}); 可以为自身的加事件(一个或多个)  也可以为其子元素加事件(一个或多个) ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  6. 关于jquery绑定事件执行两次

    经常会出现jquery绑定事件执行两次的情况,如: $("a[tag=slide]").click(function () { alert(1); $(this).parent() ...

  7. jquery绑定事件时如何向事件函数里传参数

    jquery绑定事件时如何向事件函数里传参数 jquery绑定事件时如何向事件函数里传参数 举例子说明: 步骤1: var button=$('<button type="button ...

  8. [js]jQuery EasyUI的linkbutton组件disable方法无法禁用jQuery绑定事件的问题分析

    问题由来 linkbutton 是 jQuery EasyUI 中常用的一个控件,可以使用它创建按钮.用法很简单,使用 a 标签给一个easyui-linkbutton 的class就可以了. < ...

  9. jquery绑定事件的区别

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

随机推荐

  1. 用CSS边框图像让你的网站更漂亮

    不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错.然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码.这篇文章将告诉你如何做 ...

  2. 如何给report自定义page number

    问题描述: report在设置分页后会自动分页,但是有默认的page number,现在的问题是有时default page number不能满足我们的需求,此时就需要自定义page number. ...

  3. ORA-19502: write error on file "/u01/app/oracle/oradata/standby/system01.dbf", blockno 40321 (blocksize=8192)【error收集】

    在RMAN备份中,出现了一个问题,就是出现坏块了. ORA-: write error on file (blocksize=) ORA-: File I/O error Linux Error: : ...

  4. X-Y Problem

    X-Y Problem 对于X-Y Problem的意思如下: 1)有人想解决问题X2)他觉得Y可能是解决X问题的方法3)但是他不知道Y应该怎么做4)于是他去问别人Y应该怎么做? 简而言之,没有去问怎 ...

  5. centos 安装 vsftp

    vsftp是一款在Linux发行版中最受推崇的FTP服务器程序.特点是小巧轻快,安全易用.下面介绍CentOS下安装和简单配置 vsftp 这个服务软件. 在Linux下可以搭建本地YUM库来进行系统 ...

  6. 【学习笔记】【oc】copy与mutableCopy

    copy 返回一个不可变的对象: mutableCopy 返回一个可变的对象: 使用copy方法时 类必须实现:<NSCopying>协议中的-(id)copyWithZone:(NSZo ...

  7. github使用入门 之GIT GUI Windows版

    申明下是原创. 这二天网上也看了不少关于github使用的文章,github对代码管理也开始用起来了.这篇给github新手看,大牛们请跳过. github说白了就是版本管理库,最常用的就是程序代码管 ...

  8. jquery-qrcode在线生成二维码

    通过bower进行获取: y@y:ydkt$ bower install jquery-qrcode --save bower not-cached git://github.com/gcusnieu ...

  9. 《OpenCL异构计算》新版中译本派送中!

    <OpenCL异构计算1.2>新鲜出炉,目前市面上仍一书难求!我们已向清华出版社订购到第一批新书.关注异构开发社区,积极参与,就有可能免费获取新书! 1.如果您异构社区的老朋友,请关注:1 ...

  10. BZOJ3394: [Usaco2009 Jan]Best Spot 最佳牧场

    3394: [Usaco2009 Jan]Best Spot 最佳牧场 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 11  Solved: 9[Sub ...