An instance of the On () method in jquery

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

A few of the previously common methods that have been extended have been.

code is as follows

copy code

Bind () $ (" P "). Bind (" click ", Function () { Alert (" The paragraph was Clicked. "); }); $ ("P"). On ("click", Function () { Alert ("the paragraph is clicked."); }); Delegate () $ (document). Ready (function () { $ ("#div1"). On ("click", "P", function () { $ (this). CSS ("Background-color", " Pink "); }); $ ("#div2"). Delegate ("P", "click", Function () { $ (this). CSS ("Background-color", "pink"); }); }); Live () $ (document). Ready (function () { $ ("#div1"). On (' click ', Function () { $ (this). CSS (" Background-color "," pink "); }); $ ("#div2"). Live ("Click", Function () { $ (this). CSS ("Background-color", "pink"); }); });

All three of these methods are deprecated after jQuery1.8, and the Live () method has been canceled by the official at 1.9, so it is recommended that the on () method be used.

Tip: If you need to remove the method that is bound on (), you can use the off () method to process it. Www.111cn.net

The code is as follows	Copy Code
$ (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 one ()

The code is as follows	Copy Code
$ (document). Ready (function () { $ ("P"). One ("click", Function () { $ (this). Animate ({fontsize: "+=6px"}); }); });

Trigger () Binding

The code is as follows	Copy Code
$ (selector). Trigger (Event,eventobj,param1,param2,...) $ (document). Ready (function () { $ ("input"). Select (function () { $ ("input"). After ("Text marked!"); }); $ ("button"). Click (function () { $ ("input"). Trigger ("select"); }); });

Multiple events bind to the same function

The code is as follows	Copy Code
$ (document). Ready (function () { $ ("P"). On ("MouseOver mouseout", function () { $ ("P"). Toggleclass ("Intro"); }); });

Multiple event bindings different functions

The code is as follows	Copy Code
$ (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"); }); });

Binding Custom Events

The code is as follows	Copy Code
$ (document). Ready (function () { $ ("P"). On ("Myownevent", Function (event, showname) { $ (this). Text (ShowName + "!) What a beautiful name! "). Show (); }); $ ("button"). Click (function () { $ ("P"). Trigger ("Myownevent", ["Anja"]); }); });

Passing data to a function

The code is as follows	Copy Code
function HandlerName (event) { alert (event.data.msg); } $ (document). Ready (function () { $ ("P"). On ("click", {msg: "Just clicked Me!"}, HandlerName) });

Applies to elements that are not created Www.111Cn.net

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