JQuery on (), Live (), trigger (), insert (), InsertAfter () method

The JQuery on () method is an officially recommended way to bind events.

$ (selector). On (Event,childselector,data,function, map);

Some of the previously common ways to extend this are:

bind () $ ("P"). Bind ("click",function() {alert ("The paragraph was clicked.");　　}); $("P"). On ("click",function() {alert ("The paragraph was clicked."); });d Elegate () $ ("#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 are recommended after jQuery1.8, and the Live () method has been canceled by the official at 1.9, so it is recommended to use the on () method. If you need to remove the method that is bound on (), you can use the off () method to process it.

$ (document). Ready (function() {$ ("P"). On ("click",function() {$ (This)　　. CSS ("Background-color", "Pink");　　});　　$ ("button"). Click (function() {$ ("P"). Off ("click"); });});

If your event only needs one operation at a time, you can use the one () method

$ (document). Ready (function() {$ ("P"). One ("click",function() {$ ()　　). 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 bind different functions

$ (document). Ready (function() {  $ ("P"). {    mouseover:function() {$ (" Body "). CSS (" Background-color "," Lightgray ");},      mouseout:function() {$ (" body "). CSS (" Background-color "," LightBlue ");},     click:function() {$ (" body "). CSS (" Background-color "," Yellow ")     ;});

Binding Custom Events

$ (document). Ready (function() {  $(function(event, ShowName) {    $ (  this). Text (ShowName + "! What a beautiful name! " ). Show ();  });  $ ("button"). Click (function() {    $ ("P"). Trigger ("Myownevent", ["Anja"]);});  

Passing data to a function

function HandlerName (event) {  alert (event.data.msg);} $ (document). Ready (function() {  $ ("P"). On ("click", {msg: "You just clicked me!" }, HandlerName)});

Applies to elements that are not created

$ (document). Ready (function() {  $ (' div '). On ("click", "P",function() {    $ (  this). Slidetoggle ();  });  $ ("button"). Click (function() {    $ ("<p>this is a new paragraph.</p>"). InsertAfter ("button");   });

After () method inserts the specified content after the selected element

$ (selector). After (content) $ ("button"). Click (function() {  $ ("P"). After (" <p>hello world!</p> ");});

InsertAfter () Inserts a SPAN element after each P element

$ (content). InsertAfter (selector); $ ("button"). Click (function() {  $ ("<span> Hello world!</span> "). InsertAfter (" P ");});

JQuery on (), Live (), trigger (), insert (), InsertAfter () method