JqueryOn绑定事件方法介绍

1. 简介

(1) On()方法在被选及子元素上添加一个或多个事件处理程序

(2) 在jquery 版本1.7起，on()方法是bind(),live()和delegate()方法的新的替代品，该方法给API带来很多便利，简化了JQUERY代码库。

(3) 使用on()方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)

2. 目前了解到使用场景

(1) 使用ajax请求数据时使用。

(2) 对加载完页面之后的元素进行事件绑定。

3. 注意事项

(1) 你使用jquery追加的元素要在一个不会进行改变的父级之下，可以是DOCUMENT。

(2) 绑定有两种方式

① 单个事件绑定

1) $(“#id”).on(‘click’,function(){})    把点击事件绑定到id为id的元素身上

2) $(“#id”).on(‘click’,’.div’,function(){})  把点击事件绑定到id为id的子级元素类名为div的元素身上

② 多事件同时绑定到一个元素上

③ $(“.div”).on({

mouseover:function(){$(“body”).css(“background-color”,”red”)},

mouseout:function(){$(“body”).css(“background-color”,”yellow”);},

click:function(){$(“body”).css(“background-color”,”green”)}

})

4. 案例

<div  class="entrust">
    <button class="btn_class"> 测试 </button>
    <button class="b_class"> 测试_测试 </button>
    <div>
        <button class="btn_id"> 测试1 </button>
        <button class="b_id"> 测试_测试1 </button>
    </div>
</div>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ENTRUST</title>
</head>
<body>
<div>
    <button> 测试 </button>
    <button> 测试-测试-测试 </button>
    <div>
        <button> 测试1 </button>
        <button> 测试-测试ButtonA </button>
    </div>
</div>

<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script>
    $(".onCase").on("click",".onCaseButtonA",function(){
        console.log(this.class,"测试—class-onCaseButtonA");
    });
    $('.onCaseButton').click(function () {
        console.log(this.class,"测试—class-onCaseButton")
    });
    $('.Button').click(function () {
        $('<button> 测试-Button </button>').append();
    });
    $('.ButtonA').click(function () {
        $("<button> 测试-测试ButtonA </button>").append();
    });
</script>
</body>

</html>

JqueryOn绑定事件方法介绍的更多相关文章

  1. jQuery绑定事件方法及区别(bind,click,on,live,one)

    第一种方式: ? 1 2 3 4 5 $(document).ready(function(){  $("#clickme").click(function(){  alert(& ...

  2. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  3. JQ绑定事件（1.9已经废除了live()等绑定事件方法，on()方法是官方推荐的绑定事件的一个方法）

    本文来源:http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(ev ...

  4. js绑定事件方法：addEventListener与attachEvent的不同浏览器的兼容性写法

    js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...

  5. 不使用jquery情况下循环添加绑定事件方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery 绑定事件及移除绑定事件方法和元素事件列表

    1.jQuery Event 事件:      ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行.在每个页面中可以有很多个函数被加载 ...

  7. js绑定事件方法：addEventListener的兼容问题

    js的事件绑定方法中,ie只支持attachEvent,而FF和Chrome只支持addEventListener;严格来说:addEventListener只有IE9以上版本的IE浏览器上能够兼容, ...

  8. [javascript]jQuery绑定事件方法：on()

    语法: $(selector).on(event,childSelector,data,function) on(event,childSelector,data,function):在被选元素及子元 ...

  9. 引用 1.9.1.min.js dom对象 没有live 绑定事件方法， 引用 1.7.js 就有live 绑定事件方法

    问题:相同环境,引用 1.9.1.min.js $('div[data-role="page"]').live('pagehide', function (event, ui) { ...

随机推荐

  1. .Net Core3.1下使用Swagger搭建web api项目

    前言:微软于前天发布.net core 3.1正式版,并将长期支持3.1.所以我听到这个消息后就急忙下载.net core 3.1的SDK和Runtime,应该是公司最先用3.1的攻城狮了

  2. GItBook命令使用(持续更新)

    GitBook基本命令 gitbook init //初始化目录文件 gitbook help //列出gitbook所有的命令 gitbook --help //输出gitbook-cli的帮助信息 ...

  3. js递归优化

    递归优化 递归在我们平时撸码中会经常用到,不过可能很多人不知道递归的弊端,就是会导致调用栈越来越深.如果没有节制的使用递归可能会导致调用栈溢出. 那什么是递归呢? 递归调用是一种特殊的嵌套调用,是某个 ...

  4. Java基础IO类之字符串流（查字符串中的单词数量）与管道流

    一.字符串流 定义:字符串流(StringReader),以一个字符为数据源,来构造一个字符流. 作用:在Web开发中,我们经常要从服务器上获取数据,数据返回的格式通常一个字符串(XML.JSON), ...

  5. 化鲲为鹏，我有话说 ，鲲鹏ARM架构的优势

    首先我在想为什么会用到鲲鹏,我个人认为最重要的还是要掌握自主研发的能力,打破国外关键技术的封锁.鲲鹏芯片完全是华为于自主设计内核,华为云Kunpeng服务器关键计算芯片全自研,提供产品可持续供应能力. ...

  6. AutoCAD中的螺旋究竟是什么螺旋？

    AutoCad从很早的时候就开始提供了螺旋线的功能,它的用法相对简单,非常适合用来对等距螺旋的理论进行演练. 选择螺旋线工具,首先画出一个基准圆,再向内(或向外)移动鼠标,拖出一个旋转3个周期的螺旋. ...

  7. GlusterFS 存储

    GlusterFS简介: 互联网四大开源分布式文件系统分别是:MooseFS.CEPH.Lustre.GusterFS. GluterFS最早由Gluster公司开发,其目的是开发一个能为客户提供全局 ...

  8. F#周报2019年第50期

    新闻 Azure Functions 3.0系统上线 GC性能架构--第1部分 ConfigureAwait问题解答 介绍System.Threading.Channels Windows Serve ...

  9. 捅娄子了，写个bug被国家信息安全漏洞共享平台抓到了？

    摸不了鱼了 2019 年 11 月 26 日,本来应该是无比平静的一天,开开会,改改bug,摸摸鱼之后等着下班.刷着新闻的间隙,手机的消息提示音响了起来,收到了一条邮件,平时收到邮件我都会选择稍后处理 ...

  10. Selenium自动化面试题

    (1)selenium的工作原理?        ① 脚本启动driver ② driver去驱动浏览器作为远程服务器 ③ 执行脚本发送请求 ④ 服务器解析请求作出相应操作,并返回给客户端(脚本) ( ...