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

    jquery on()方法是官方推荐的绑定事件的一个方法。

    $(selector).on(event,childSelector,data,function,map)

    实例:

        $(document).on("pageinit", "#pageUnSingle", function () {
                load();
            });

    由此扩展开来的几个以前常见的方法有.

    bind()
    
    $("p").bind("click",function(){
    alert("The paragraph was clicked.");
    });
    
    $("p").on("click",function(){
    alert("The paragraph was clicked.");
    });
    
    delegate()
    
    $(document).ready(function(){
    $("#div1").on("click","p",function(){
    $(this).css("background-color","pink");
    });
    $("#div2").delegate("p","click",function(){
    $(this).css("background-color","pink");
    });
    });
    
    live()
    $(document).ready(function(){
    $("#div1").on("click",function(){
    $(this).css("background-color","pink");
    });
    $("#div2").live("click",function(){
    $(this).css("background-color","pink");
    });
    });

    以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。

    tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

    $(document).ready(function(){
    $("p").on("click",function(){
    $(this).css("background-color","pink");
    });
    $("button").click(function(){
    $("p").off("click");
    });
    });

    tip:如果你的事件只需要一次的操作,可以使用one()这个方法

    $(document).ready(function(){
    $("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
    });
    });

    trigger()绑定

    $(selector).trigger(event,eventObj,param1,param2,...)
    //code from http://caibaojian.com/jquery-on.html
    $(document).ready(function(){
    $("input").select(function(){
    $("input").after(" Text marked!");
    });
    $("button").click(function(){
    $("input").trigger("select");
    });
    });

    多个事件绑定同一个函数

    $(document).ready(function(){
      $("p").on("mouseover mouseout",function(){
        $("p").toggleClass("intro");
      });
    });

    多个事件绑定不同函数

    $(document).ready(function(){
      $("p").on("mouseover mouseout",function(){
        $("p").toggleClass("intro");
      });
    });

    绑定自定义事件

    $(document).ready(function(){
      $("p").on("myOwnEvent", function(event, showName){
        $(this).text(showName + "! What a beautiful name!").show();
      });
      $("button").click(function(){
        $("p").trigger("myOwnEvent",["Anja"]);
      });
    });

    传递数据到函数

    function handlerName(event) 
    {
      alert(event.data.msg);
    }
    
    $(document).ready(function(){
      $("p").on("click", {msg: "You just clicked me!"}, handlerName)
    });

    适用于未创建的元素

    $(document).ready(function(){
      $("div").on("click","p",function(){
        $(this).slideToggle();
      });
      $("button").click(function(){
        $("<p>This is a new paragraph.</p>").insertAfter("button");
      });      
  • 相关阅读:
    C#
    C#
    ssh学习笔记
    (已解决)Could not open '/var/lib/nova/mnt/*/volume-*': Permission denied
    RPCVersionCapError: Requested message version, 4.17 is incompatible. It needs to be equal in major version and less than or equal in minor version as the specified version cap 4.11.
    如何在linux下安装idea
    The system has no LUN copy license
    调整mysql数据库最大连接数
    mysql数据库编码问题
    cinder支持nfs快照
  • 原文地址:https://www.cnblogs.com/jokerjason/p/5858984.html
Copyright © 2011-2022 走看看