首先,先看官方描述:

  再来,用实例解释一下:

1.简单绑定单个事件:

$("body").on("click",".edit_btn",function () {
alert("edit");
})

这种用法与click()用法相同:

$(".edit_btn").click(function () {
alert("edit");
})

注意:

  如果此时edit_btn是动态生成的,例如下面这样,则必须使用on(),不然事件无法起作用。

var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>")
.addClass("glyphicon glyphicon-pencil"))
.append("编辑");

2.可绑定多个事件

$('div').on({
'click':function(){
alert("1111");
},
'mouseover':function(){
alert("2222");
}
});

jquery的on()用法实例的更多相关文章

  1. jQuery ajax - getJSON() 用法实例

    实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: $.getJSON("test.js", function(json){ aler ...

  2. jQuery.holdReady()方法用法实例

    调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法.可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件 ...

  3. 【学亮IT手记】jQuery each()函数用法实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  4. jQuery之scroll用法实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  6. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  7. jquery下json数组的操作用法实例

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

  8. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

  9. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

随机推荐

  1. 根据屏幕自适应宽度:@media

    @media screen and (min-width: 1490px){ .w1224{ width: 1400px !important; }}@media screen and (max-wi ...

  2. 十四、JavaWeb监听器

    JavaWeb监听器 三大组件: l Servlet l Listener l Filter Listener:监听器 初次相见:AWT 二次相见:SAX 监听器: l 它是一个接口,内容由我们来实现 ...

  3. layer过去的时间不能选择,只能选择未来的时间 LayUI中的时间日期控件,设置时间范围,

    默认Layui中的时间控件显示如下: 我当时系统时间是2018-06-07, 我需要做的是2018-06-07之后过去的时间不能选择 <p><span>时间范围:</sp ...

  4. Linux系统安装tomcat

    1.首先下载tomcat:http://tomcat.apache.org/download-60.cgi 2.解压缩tar.gz文件: tar -xzvf xxxxxxx/apache-tomcat ...

  5. windows安装虚拟机(VMware)

    一.安装虚拟机 1.打开安装包 2.接受协议 3.选择安装位置 4.按照提示下一步即可 5.完成安装 二.安装带有GUI的Redhat7系统 1.选择自定义安装 2.默认虚拟机硬件兼容 3.选择稍后安 ...

  6. Dynamics365 WebAPI ADFS token 获取

    public class CrmAuth { ///<summary> /// Token /// </summary> public string access_token ...

  7. javascript 表达式

    //    for(表达式1;表达式2;表达式3){//        循环体语句;//    }//    先执行表达式1,在执行2表达式,//        如果2表达式结果为false,退出循环 ...

  8. SpringBoot2.0+Mybatis-Plus3.0+Druid1.1.10 一站式整合

    SpringBoot2.0+Mybatis-Plus3.0+Druid1.1.10 一站式整合 一.先快速创建一个springboot项目,其中pom.xml加入mybatis-plus 和druid ...

  9. Vue.js——快速入门Vuex

    一. 什么是Vuex? Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. 上图中绿色虚线包裹起 ...

  10. PowerBI功能发布时间线

    DAX/PowerBI系列 - PowerBI功能发布时间线 PowerBI从GA/上线以来,每月发布的功能收集起来做成了一个报表:(耐心等待PowerBI 出来,噔噔噔噔~~~) 上图显示: 1)D ...