jQuery jQuery on() method, jqueryon method_PHP tutorial-PHP Tutorial-php.cn

jQuery jQuery on() method, jqueryon method_PHP tutorial

WBOY

Release： 2016-07-12 09:05:40

Original

907 people have browsed it

jQuery jQuery on() method, jqueryon method

jQuery on() method is an officially recommended method for binding events.

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

Copy after login

Several previously common methods expanded from this include.

<strong>bind()</strong>

　　$("p").bind("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

　　$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

<strong>delegate()</strong>

　　$("#div1").on("click","p",function(){
　　　　$(this).css("background-color","pink");
　　});<br />
　　$("#div2").delegate("p","click",function(){
　　　　$(this).css("background-color","pink");
　　});


<strong>live()</strong>

　　$("#div1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});<br />
　　$("#div2").live("click",function(){
　　　　$(this).css("background-color","pink");
　　});

Copy after login

The above three methods are not recommended after jQuery 1.8. The official has canceled the use of live() method in jQuery 1.9, so it is recommended to use the on() method.

tip: If you need to remove the method bound to on(), you can use the off() method.

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

Copy after login

tip: If your event only requires one operation, you can use the one() method

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

Copy after login

trigger() binding

$(selector).trigger(event,eventObj,param1,param2,...)

Copy after login

$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");
　　});
});

Copy after login

Multiple events bound to the same function

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

Copy after login

Multiple events bound to different functions

$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});

Copy after login

Bind custom events

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

Copy after login

Pass data to function

function handlerName(event) 
{
  alert(event.data.msg);
}

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

Copy after login

Applies to uncreated elements

$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

Copy after login