语法

$(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. Android - Ashmem驱动

    以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luosheng ...

  2. spring03autowire属性

    1.创建需要的实体类 public class Student { //学生实体类 private String name; //姓名 private Integer age; //年龄 privat ...

  3. NYOJ737

    题意:给n堆石子,按照顺序排列,只能相邻两堆石子合并,求最后合并为一堆时所花费的最小代价,石子合并代价为两堆石子之和. 输入: n(石子堆数) Xi(每堆石子个数) 输出: T(最小代价) 思路:经典 ...

  4. Java类与类之间关系总结

    继承,依赖,关联,聚合,组合 一般来说依赖和关联是类似的,关联是强依赖,聚合和组合是一类,组合属于强聚合. 继承:一般是子类和父类之间的关系,关键字extends 依赖:可以这样记忆,做某件事必须要依 ...

  5. Linq使用GroupBy筛选数据

    StringBuilder sb = new StringBuilder(); List<IGrouping<string, modle>> listRepeat = mode ...

  6. osgi与webservice

    osgi简介: http://osgia.com/ http://blog.csdn.net/xiaokui008/article/details/9662933 http://wdhdd889.it ...

  7. MySQL 数据表修复及数据恢复

    1. MYSQL数据表在什么情况下容易损坏? 服务器突然断电导致数据文件损坏. 强制关机,没有先关闭mysql 服务等.   2. 数据表损坏后的主要现象是什么? 从表中选择数据之时,得到如下错误:I ...

  8. SQL函数:用于将小写的数值翻译成大写的字符串

    --功能:  用于将小写的数值翻译成大写的字符串(支持到分,即小数点后两位)       --入口参数:@decNum------数字型变量    --返回:字符串    --举例:select db ...

  9. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. html中window对象top 、self 、parent 等属性

    window对象用法: http://www.w3school.com.cn/htmldom/dom_obj_window.asp top 属性返回最顶层的先辈窗口. 该属性返回对一个顶级窗口的只读引 ...