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 Core 基础 - 2：共享框架

    深入 .NET Core 基础 - 2:共享框架 原文地址:https://natemcmaster.com/blog/2018/08/29/netcore-primitives-2/ 共享框架从 . ...

  2. 【SpringSecurityOAuth2】源码分析@EnableOAuth2Sso在Spring Security OAuth2 SSO单点登录场景下的作用

    目录 一.从Spring Security OAuth2官方文档了解@EnableOAuth2Sso作用 二.源码分析@EnableOAuth2Sso作用 @EnableOAuth2Client OA ...

  3. 转战C#_001

    ---------------尽量用最少的语言描述 C# 世界里的所有事物------------------- 1. C#(pronounced "C-sharp") is an ...

  4. mysql5.7 gruop by报错this is incompatible with sql_mode=only_full_group_by

    解析:在mysql 工具 搜索或者插入数据时报下面错误: ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY cla ...

  5. Create an Embedded Framework in Xcode with Swift

    转自:http://zappdesigntemplates.com/create-an-embedded-framework-in-xcode-with-swift/ Post Series: Cre ...

  6. UVA-11107 Life Forms(求出现K次的子串，后缀数组+二分答案)

    题解: 题意: 输入n个DNA序列,你的任务是求出一个长度最大的字符串,使得它在超过一半的DNA序列中出现.如果有多解,按照字典序从小到大输入所有解. 把n个DNA序列拼在一起,中间用没有出现过的字符 ...

  7. ARTS-S linux查看进程打开的文件数

    当怀疑进程打开文件没有关闭时,可以反复执行以下命令,查看进程打开的文件数是否会不断增加. ls -l /proc/18707/fd | wc -l 其中18707是进程id

  8. 使用ExcelPackage进行Excel报表

    Nuget包名为 epplus.core 命名空间OfficeOpenXml string localFileName = path + Path.DirectorySeparatorChar + f ...

  9. 基于iCamera测试500w摄像头-mt9p001,mt9p031,mt9p001模块小结

    基于iCamera测试500w摄像头-mt9p001,mt9p031,mt9p001模块小结 先看实物 M12标准无畸变镜头效果 标准CS镜头效果 iCamera底板+mt9p001安装效果 再看看c ...

  10. 曹工说Spring Boot源码（2）-- Bean Definition到底是什么，咱们对着接口，逐个方法讲解

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码系列开讲了(1)-- Bean Definition到底是什么,附spring思维导图分享 工程代码地址 思维导图地址 工程结构图: 正 ...