Detailed explanation of jQuery on() method usage tips_jquery

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

Copy code The code is as follows:

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

Several previously common methods expanded from this include.

Copy code The code is as follows:

bind()

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

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

delegate()

　$("#div1").on("click","p",function(){
　　$(this).css("background-color","pink");
});

　$("#div2").delegate("p","click",function(){
　　$(this).css("background-color","pink");
});

live()

　$("#div1").on("click",function(){
　　$(this).css("background-color","pink");
});

　$("#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 on() method.

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

Copy code The code is as follows:

$(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

Copy code The code is as follows:

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

trigger() binding

Copy code The code is as follows:

$(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

Copy code The code is as follows:

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

Multiple events bound to different functions

Copy code The code is as follows:

$(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

Copy code The code is as follows:

$(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

Copy code The code is as follows:

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

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

Applies to uncreated elements

Copy code The code is as follows:

$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("

This is a new paragraph.

").insertAfter("button");
});
});