jQuery jQuery on() method, jqueryon method_PHP tutorial

jQuery jQuery on() method, jqueryon method

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

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

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

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

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

trigger() binding

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

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

Multiple events bound to the same function

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

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

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

Pass data to function

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

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

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

http://www.bkjia.com/PHPjc/1068256.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1068256.htmlTechArticlejQuery jQuery on() method, jqueryon method jQuery on() method is an officially recommended method for binding events . $(selector).on(event,childSelector,data,function,map) expanded from this...