zoukankan      html  css  js  c++  java
  • JqueryOn绑定事件方法介绍

    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>

    一个96年的PHPER
  • 相关阅读:
    Build-in Function:abs(),all(),any(),assii(),bin(),issubclass(),bytearray(),isinstance()
    函数及while实例
    提示'HTTP消息不可读'
    python中关于不执行if __name__ == '__main__':测试模块的解决
    python输出测试报告测试成功
    SqlServer——批量插入数据
    网页样式——各种炫酷效果持续更新ing...
    网站部署发布到互联网等整套流程
    如何远程操控别人的电脑?我来教你
    代码生成工具——CodeSmith
  • 原文地址:https://www.cnblogs.com/zhouxiaohei/p/11728427.html
Copyright © 2011-2022 走看看