Deep understanding of jquery event Binding _jquery

Html:

<a href= "#" onclick= "addbtn ()" >addBtn</a>

<div id= "MDiv" >

  <button class= "cbtn" onclick = "alert (11111)" >button1</button>

  <button class= "cbtn" >button2</button>

  <button class= "cbtn" >button3</button>

</div>

Javascript:

<script type= "Text/javascript" >
 function addbtn () {
      $ (' #mDiv '). Append (' <button class= ' cbtn ' > Button5</button> ')
 }
jQuery (function ($) {
//use on to replace live and delegate (live is abandoned for performance reasons and replaced by delegate) The button that is added to the mdiv still has the bound event
$ (' #mDiv '). On (' click ', '. Cbtn ', function (index, eledom) {
alert ($ (this). HTML ())
 });
Use
on instead of bind $ ('. Cbtn '). On (' click ', Function () {
alert ($ (this). html ())
 })
//NOTE:/
*
1, regardless of the use of BIND, on, delegate, click (function ()) are repeated binding, that is, the binding of the same type of event is placed in an event queue, executed sequentially, after the bound event does not replace the previously bound, for on use off, Delegate use Unbind to unbind with Undelegate,bind and click, for example, unbind (type) is passed as event type, and all event bindings are solved without passing a type Note that the element itself cannot be unbind (such as Button1)
2, to bind custom events, such as ' open ', which can be used, but activation requires the use of the trigger

summary: It
is recommended that the on function be used, The binding form is $ ('. MyClass '). On ({
click:function (eledom) {
... do someting ...
},
dbclick:function ( Eledom) {
... do someting ...
}
....
})
*/
}
</script>

Some notes:

Bind (TYPE,[DATA],FN) Bind event handlers for specific events for each matching element

$ ("a"). Bind ("click", Function () {alert ("OK");}); Live (TYPE,[DATA],FN) attaches an event handler function to all matching elements, even if the element is added later

$ ("a"). Live ("Click", Function () {alert ("OK");}); Delegate (SELECTOR,[TYPE],[DATA],FN) specifies an element (which is a child of the selected element) to add one or more event handlers, and to specify which functions to run when these events occur

$ ("#container"). Delegate ("A", "click", Function () {alert ("OK");}) On (EVENTS,[SELECTOR],[DATA],FN) an event handler that is bound to one or more events on the selection element

Difference:

. Bind () is directly bound to the element

Live () is bound to an element in a bubbling manner. More appropriate to the list type, bound to the document DOM node. and. Bind () is the advantage of supporting dynamic data.

. Delegate () is a more precise, small-scale use of event proxies, with superior performance. Live ()

. On () is the latest version 1.9 that consolidates the new event binding mechanism in the previous three ways

This in-depth understanding of the jquery event binding is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.