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. Netty学习——Apache Thrift 简介和下载安装

    Netty学习——Apache Thrift 简介和下载安装 Apache Thrift 简介 本来由Facebook开发,捐献给了Apache,成了Apache的一个重要项目 可伸缩的,跨语言的服务 ...

  2. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  3. ceph分布式存储

    存储分类: DAS:直连存储    ide线  sata线   usd线   sas线 NAS:网络附加存储   nfs   samba   ftp SAN:存储区域网络      issci SDS ...

  4. dubbo服务治理框架

    Dubbo的概述 1.1. Dubbo的背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. ...

  5. Python必学之编译器用哪个好？你用错了吧！

    学python要知道怎么用好编译器.当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件由于整个Pyth ...

  6. Chapter 3 ：代码的坏味道

    "如果尿布臭了,就换掉它." --Beck奶奶,论保持小孩清洁的哲学 代码的坏味道这一章集中论述该何时重构.具体的重构方法在后面的章节. "没有任何度量规矩比得上见识广博 ...

  7. 直击面试，聊聊 GC 机制

    前言 文章来源:https://studyidea.cn/ GC 中文直译垃圾回收,是一种回收内存空间避免内存泄漏的机制.当 JVM 内存紧张,通过执行 GC 有效回收内存,转而分配给新对象从而实现内 ...

  8. mac 删除生成的.DS_Store文件，以及设置不再生成此文件

    步骤一:删除当前目录下所有隐藏.DS_store文件(请一定要在当前目录执行) sudo find ./ -name ".DS_Store" -depth -exec rm {} ...

  9. ORA-19625: error identifying file

    问题描述:rman进行备份的时候,出现报错ORA-19625,无效的文件 1.进行数据库备份,然后就出现了报错,没有这个24号的归档日志 RMAN> run{ 2> allocate ch ...

  10. pringboot热部署导致applicationContext获取为空

    在项目中遇到一个很奇怪的问题,写了一个SpringContextUtil工具类来获取applicationContext,初始化的时候断点来看的确是初始化了,applicationContext对象不 ...