jQuery on of method

The jQuery on() method is one of the officially recommended methods for binding events.

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

Several previously common ways of extending this are.

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

　　});

None of the above three methods is recommended after jQuery1.8. The live() method was officially canceled at 1.9, so it is recommended to use on() method.

tip: if you need to remove the method bound by 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 requires only 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 event bindings with one function

$(document).ready(function(){

  $("p").on("mouseover mouseout",function(){

    $("p").toggleClass("intro");

  });

});

Multiple events bind 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 the data to the 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");

  });

});