语法

$(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. Java基础知识强化82:Random类概述和方法使用

    1. Random类 public class Random extends Object implements Serializable: 此类的实例用于生成伪随机数流.此类使用48位种子. (1) ...

  2. 简单题思维转化BestCoder

    题意:给你a, b, c, d四个数,这几个数的范围都是大于0小于1000的整数,让比较 a ^b 和 c ^ d的大小. 这道题看着特别简单,但是当时就是做不出来,将近一个月没有做题了,手生了,不过 ...

  3. Linux最大文件打开数

    介绍 在Linux下有时会遇到Socket/File : Can't open so many files的问题.其实Linux是有文件句柄限制的,而且Linux默认一般都是1024(阿里云主机默认是 ...

  4. apache添加php支持

    在php编译安装好后,需要在apache中添加对php的支持,方法:找到“#AddType application/x-gzip .gz .tgz”并在后面加入AddType application/ ...

  5. C++拾遗(九)类与动态内存分配(1)

    创建类时编译器自动生成以下成员函数(如果用户没有定义): 1.默认构造函数 2.拷贝构造函数 3.赋值操作符 4.默认析构函数 5.地址操作符 以下一一说明: 构造函数 构造函数在创建对象时被调用. ...

  6. 记一次MySQl 安装1067错误

    1.今天阿里云windows server 2008 r2服务器上安装mysql,配置完发现无法启动mysql服务(并发设置的是500),查询windows日志提示 Unknown/unsupport ...

  7. jQuery自学笔记(二):jQuery选择器

    一.简单选择器 ID选择器:$('#box') 元素标签名:$('div') 类选择器:$('.box') jQuery提供了length和size()两种方法查看返回的元素,可验证ID在页面只出现一 ...

  8. smarty 变量调节器

    变量调节器:<{$a|变量调节器}> 了解更多可以查询smarty手册 主要修改此页面的信息来了解变量调节器:main.php/main.html(0603) 1.利用给定的变量调节器 c ...

  9. CentOS6.4 GOOGLE chrome install

    yum install http://people.centos.org/hughesjr/chromium/6/i386/RPMS/chromium-28.0.1500.45-205727.i686 ...

  10. nginx读书日志

    2016.12.20 nginx 功能特性: 既可以作为http服务器,也可以作为反向代理服务器或者邮件服务器 基本服务:处理静态文件,处理索引文件以及支持自动索引 nginx服务器中主要由proxy ...