语法

$(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. SpringMVC08转发和重定向

    public class User { private String name; private Integer age; public String getName() { return name; ...

  2. eclipse-android-activity_main/fragment_main文件处理

    android新建工程后,在res/layout/下有两个文件,之前用studio的时候貌似没有,只有一个文件,然后再测试Activity切换的时候,一直在纠结这个问题,下面是解决方法: 1)将fra ...

  3. maven项目java包名的路径问题

    maven项目中错误: 找不到或无法加载主类

  4. jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  5. 修复 status 为 unusable 的 index

    以DBA权限登陆,执行以下脚本即可. declare     -- 指向所有 UNUSABLE 状态的 index 的游标      cursor c is        select index_n ...

  6. 遍历std::list过程中删除元素后继续遍历过程

    std::list::erase Erase elements Removes from the list container either a single element (position) o ...

  7. combobox只读代码

    public partial class Form1: Form { // combobox只读代码 [DllImport("user32.dll", CharSet = Char ...

  8. pythond对象、异常、反射的学习笔记

    python多继承,刚开始我是表示惊讶的,毕竟学的php,哪来的多继承?顶多也就是利用接口模拟多继承后者使用反射机制实现.那么还是来看看python的强大吧 1 首先,Python的类继承了多个类,那 ...

  9. Cloudera Search配置

    一.集群机器配置信息 Cloudera集群机器: 10.2.45.104 GBD000.localdomain GBD00010.2.45.105 GBD101.localdomain GBD1011 ...

  10. java之多线程的理解

    线程的属性 (1)线程的状态     线程在它的生命周期中可能处于以下几种状态之一: New(新生):线程对象刚刚被创建出来: Runnable(可运行):在线程对象上调用start方法后,相应线程便 ...