天天看点
返回

jquery 绑定 on Query on()方法

Query on()方法

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

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

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

     
  1.  bind()       
    2.           
  2.  　　$("p").bind("click",function(){       
    3.       
  3.  　　　　alert("The paragraph was clicked.");       
    4.       
  4.  　　});       
    5.           
  5.  　　$("p").on("click",function(){       
    6.       
  6.  　　　　alert("The paragraph was clicked.");       
    7.       
  7.  　　});       
    8.           
  8.  delegate()       
    9.           
  9.  　　$("#div1").on("click","p",function(){       
    10.       
  10.  　　　　$(this).css("background-color","pink");       
    11.       
  11.  　　});       
    12.       
  12.  　　$("#div2").delegate("p","click",function(){       
    13.       
  13.  　　　　$(this).css("background-color","pink");       
    14.       
  14.  　　});       
    15.               
  15.  live()       
    16.           
  16.  　　$("#div1").on("click",function(){       
    17.       
  17.  　　　　$(this).css("background-color","pink");       
    18.       
  18.  　　});       
    19.       
  19.  　　$("#div2").live("click",function(){       
    20.       
  20.  　　　　$(this).css("background-color","pink");       
    21.       
  21.  　　});       
    22.

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

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

     
  1.  $(document).ready(function(){       
    2.       
  2.  　　$("p").on("click",function(){       
    3.       
  3.  　　　　$(this).css("background-color","pink");       
    4.       
  4.  　　});       
    5.       
  5.  　　$("button").click(function(){       
    6.       
  6.  　　　　$("p").off("click");       
    7.       
  7.  　　});       
    8.       
  8.  });       
    9.

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

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

trigger()绑定

     
  1.  $(selector).trigger(event,eventObj,param1,param2,...)       
    2.      
    
     
  1.  $(document).ready(function(){       
    2.       
  2.  　　$("input").select(function(){       
    3.       
  3.  　　　　$("input").after(" Text marked!");       
    4.       
  4.  　　});       
    5.       
  5.  　　$("button").click(function(){       
    6.       
  6.  　　　　$("input").trigger("select");       
    7.       
  7.  　　});       
    8.       
  8.  });       
    9.

多个事件绑定同一个函数

     
  1.  $(document).ready(function(){       
    2.       
  2.  $("p").on("mouseover mouseout",function(){       
    3.       
  3.  $("p").toggleClass("intro");       
    4.       
  4.  });       
    5.       
  5.  });       
    6.

多个事件绑定不同函数

     
  1.  $(document).ready(function(){       
    2.       
  2.  $("p").on({       
    3.       
  3.  mouseover:function(){$("body").css("background-color","lightgray");},       
    4.       
  4.  mouseout:function(){$("body").css("background-color","lightblue");},       
    5.       
  5.  click:function(){$("body").css("background-color","yellow");}       
    6.       
  6.  });       
    7.       
  7.  });       
    8.

绑定自定义事件

     
  1.  $(document).ready(function(){       
    2.       
  2.  $("p").on("myOwnEvent", function(event, showName){       
    3.       
  3.  $(this).text(showName + "! What a beautiful name!").show();       
    4.       
  4.  });       
    5.       
  5.  $("button").click(function(){       
    6.       
  6.  $("p").trigger("myOwnEvent",["Anja"]);       
    7.       
  7.  });       
    8.       
  8.  });       
    9.

传递数据到函数

     
  1.  function handlerName(event)       
    2.       
  2.  {       
    3.       
  3.  alert(event.data.msg);       
    4.       
  4.  }       
    5.           
  5.  $(document).ready(function(){       
    6.       
  6.  $("p").on("click", {msg: "You just clicked me!"}, handlerName)       
    7.       
  7.  });       
    8.

适用于未创建的元素

     
  1.  $(document).ready(function(){       
    2.       
  2.    $("div").on("click","p",function(){       
    3.       
  3.      $(this).slideToggle();       
    4.       
  4.    });       
    5.       
  5.    $("button").click(function(){       
    6.       
  6.      $("<p>This is a new paragraph.</p>").insertAfter("button");       
    7.       
  7.    });       
    8.       
  8.  });       
    9.
jquery 绑定 ON
上一篇: Django前端向后端发送数据，使用submit按钮提交时不起作用问题出在action这里，我从StackOverflow获取到的答案
下一篇: oracle dblink too many

继续阅读