zoukankan      html  css  js  c++  java
  • jQuery 的on()方法

    jQuery 的on()方法

    一、总结

    一句话总结:

    1、普通添加事件:$("a").on("click", function () {执行的代码})
    2、未创建元素:$("body").on("click", "a", function (e) {执行的代码})
    3、传递参数:$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})

    1、jquery的on方法给元素添加事件?

    $("a").on("click", function () {执行的代码})
    $("a").on("click", function () {
        console.log(0)
    })

    2、jquery的on方法给未创建的元素添加事件?

    $("body").on("click", "a", function (e) {执行的代码})
    $("body").on("click", "a", function (e) {
     
    });

    3、jquery的on方法传递参数?

    $("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})
    $("p").on("click", { "txt": "文本" }, function (e) {
        $("a").text(e.data.txt);
    })

    4、jquery的on方法 给未创建的元素添加事件 实例?

    给新添加的元素hidden_panel类添加点击事件:$("body").on("click", ".hidden_panel", function (e) { 执行的代码 });
    <script>
      $(function () {
          $("body").on("click", ".hidden_panel", function (e) {
              $(this).children(".panel-body").toggle();
              $(this).children(".panel-footer").toggle();
              $(this).find(".panel-heading_symbol_left").toggle();
              $(this).find(".panel-heading_symbol_down").toggle();
          });
      });
    </script>

    二、jQuery on()方法使用

    转自或参考:jQuery on()方法使用
    https://www.cnblogs.com/sntetwt/p/10758176.html

    jQuery on()方法
    基本语法:
    语法结构一:

    $(selector).on(event,function)
    

    语法结构二:

    $(selector).on(events,[selector],[data],function)
    

    语法结构三:

    $(selector).on(object,[selector],[data])
    

      

    结构一:

    $("a").on("click", function () {
        console.log(0)
    })
    

    结构二[selector],适用于未创建的元素

    $("body").on("click", "a", function (e) {
    
    });
    

    结构二[data],函数传递:

    $("p").on("click", { "txt": "文本" }, function (e) {
        $("a").text(e.data.txt);
    })
    

    结构三{object},绑定不同函数:

    $("p").on({
        click: function () { $(this).css("color", "green"); },
        mouseover: function () { $(this).css("color", "red"); },               
        mouseout: function () { $(this).css("color", "black"); },
    });
    

    off()方法,解除绑定

    $("body").on("click","a",function(){
        $("a").off("click");
    })
    

    one()方法,绑定一次

    $("a").one("click",function(){
    
    });
    

    trigger()方法,关联事件

    $("p").click(function () {
        $("a").trigger("click");
    });
    $("a").on("click", function () {
        console.log(0)
    });
    

      

      

      

     
  • 相关阅读:
    WordPress错误:无法启用插件,因为它引起了一个致命错误
    快速使用 Thinkphp 之一: 准备工作-配置PHP环境及下载Thinkphp文件
    基于XML文件格式引用页面
    PHP清除html、css、js格式并去除空格的PHP函数
    本地无法启动MySQL服务,报的错误:1067,进程意外终止
    快速使用 Thinkphp 之二: 创建自己的应用项目
    HTML页面里加载flash文件源码
    【学习笔记】数据库 windrainpy
    【转】给年轻程序员的建议 windrainpy
    【转】js变量以及其作用域详解 windrainpy
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/11785049.html
Copyright © 2011-2022 走看看