经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
JqueryOn绑定事件方法介绍
来源:cnblogs  作者:周小黑  时间:2019/10/24 9:18:19  对本文有异议

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>

 

原文链接:http://www.cnblogs.com/zhouxiaohei/p/11728427.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号