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)
    });
    

      

      

      

     
  • 相关阅读:
    SGU 106 The equation 扩展欧几里德
    poj 2478 Farey Sequence 欧拉函数前缀和
    uva 11752 The Super Powers 素数+大数判断大小
    Lightoj 1370 素数打表 +二分
    vijos 1250 最勇敢的机器人 分组背包+并查集
    Codeforces Round #366 (Div. 2) A , B , C 模拟 , 思路 ,queue
    BZOJ 4034: [HAOI2015]T2 树链剖分
    BZOJ 1057: [ZJOI2007]棋盘制作 悬线法求最大子矩阵+dp
    BZOJ 1260: [CQOI2007]涂色paint 区间DP
    BZOJ 1264: [AHOI2006]基因匹配Match 树状数组+DP
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/11785049.html
Copyright © 2011-2022 走看看