Understanding jQuery on() function usage-JS Tutorial-php.cn

Understanding jQuery on() function usage

巴扎黑

Release： 2017-06-25 10:33:02

Original

1194 people have browsed it

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

<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="//m.sbmmt.com/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>

Copy after login

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

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 samefunction

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

Copy after login

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

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

Copy after login

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!