How to use the JQuery event delegate binding click

Direct Binding UL Click event

The code is as follows	Copy Code
$ ("ul"). Click (Function (E)

Example

code is as follows	copy code
$ (function () {  //$ ("ul"). On (' Click ', This,function (e) {  $ ("UL"). Click (function (e) {    $target = $ (e.target);   if ($target. Is ("H3")) {     alert ("H3");       }else if ($target. Is ("a.a1")   {     alert ("a.a1");         else if ($target. Is ("a.a2")    {    alert ("a.a2");      }   else if ($target. Is (" A.uhead "))//www.111cn.net   {    alert (" A.uhead ");   }  } ; });

For example, if we were to develop a dynamically added text box, there would be a label for each text box to cancel the text box. A help like this is inefficient:

The code is as follows	Copy Code
$ (' #myList a). bind (' click ', function () { $ (this). Closest (' Li '). Remove (); Do stuff });

Instead, we should listen for the Click event at the parent level.

The code is as follows	Copy Code
$ (' #myList '). Bind (' click ', Function (e) { var target = E.target,//E.target grabs the node that triggered the event. $target = $ (target); Wraps the node in a JQuery object if (Target.nodename = = ' A ') { $target. Closest (' Li '). Remove (); Do stuff Www.111cn.net } });

The parent node acts as a transmitter and can do some work on the target element that triggered the event

Example 5.10. Using $.fn.delegate delegate Events

The code is as follows	Copy Code
$ (' #myUnorderedList '). Delegate (' Li ', ' click '), function (e) { var $myListItem = $ (this); // ... });

Example 5.11. Using $.fn.live delegate Events

The code is as follows	Copy Code
$ (' #myUnorderedList Li '). Live (' click ', Function (e) { var $myListItem = $ (this); // ... });

Unbind a delegate event
If you need to remove a delegated event, you cannot simply unbind it. Use $.fn.undelegate to Unbind events that use $.fn.delegate bindings, and use $.fn.die to unbind events that use $.fn.live bindings. Like bindings, you can optionally unbind the name of the binding function.

code is as follows	copy code
$ (' #myUnordered List '). Undelegate (' Li ', ' click '); $ (' #myUnorderedList Li '). Die (' click ');