Understanding jQuery on() function usage

jQuery The 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.

<span style="font-family: verdana, geneva; font-size: 14px;"><strong>bind()</strong>　　$("p").bind("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

　　<span style="color: #ff0000;">$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});</span><strong>delegate()</strong>　　<span style="color: #ff0000;">$("#p1").on("click","p",function(){
　　　　$(this).css("<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>","pink");
　　});<br></span>　　$("#p2").delegate("p","click",function(){
　　　　$(this).css("background-color","pink");
　　});<strong>live()</strong>　　<span style="color: #ff0000;">$("#p1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});</span><br>　　$("#p2").live("click",function(){
　　　　$(this).css("background-color","pink");
　　});<br></span>

The above three methods are all available after jQuery 1.8 It is not recommended to use. The official has canceled the use of live() method in 1.9, so it is recommended to use 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 samefunction

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

Bind multiple events 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(){
  $("p").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

The above is the detailed content of Understanding jQuery on() function usage. For more information, please follow other related articles on the PHP Chinese website!