jquery event Delegate () method usage detailed

The syntax is simple.

$ (selector). Delegate (Childselector,event,data,function)

Parameter description

Childselector required. Specify one or more child elements to attach an event handler to.

Event required. Specify one or more events that are attached to an element.

Multiple event values are separated by a space. Must be a valid event.

Data is optional. Specify additional data to be passed to the function.

function Required. Specify the function to run when an event occurs.

A delegate function is called by a common parent element of a type.

The code is as follows	Copy Code
Listnode.delegate ('. Condition-remove ', ' click ', Function (e) { E.preventdefault (); $ (this). Parents ('. Search-condition-item '). Remove (); });

Full instance (effect to be implemented)

The code is as follows

Copy Code

function Rendersearchconditions (selectionid,conditions) {var conditionstemplate = ' <div class= ' Search-conditions-list-section ">" + ' <ul class= ' search-conditions-list ' ></ul> ' + ' </div> ', ListNode = $ (conditionstemplate); Listitemtemplate = ' <li class= ' search-condition-item ' data-type= ' {conditontype} ' ><span>{condition}< /span><a class= "Condition-remove" href= "#" >x</a></li> "; for (var key in conditions) { var condition = Conditions[key].keyword, ConditionType = Conditions[key].type, Listitemnode = $.substitute (listitemtemplate,{conditiontype:conditiontype,condition:condition}); Listnode.append (Listitemnode); } $ (Selectionid). prepend (ListNode); Listnode.delegate ('. Condition-remove ', ' click ', Function (e) { E.preventdefault (); $ (this). Parents ('. Search-condition-item '). Remove (); }); }

1. In a bound transaction, get the transaction source, invoke the Hide method, and pass in the transaction source object:

The code is as follows	Copy Code
$ (document). Delegate ("Body", "click", Function (e) { var ev = e | | window.event; Transaction var target = Ev.target | | Ev.srcelement; Get transaction Source Hide (Ev.target | | ev.srcelement, TRUE); });

Dibon with the $ (window), but IE8 before, seems to have bugs.
$ (document) bad, the page after loading, will trigger once ...

2.
In the Hide method, determines whether the transaction source is emitted from the specified element, that is, the transaction source element is not a child element of the specified element or itself.

The code is as follows

Copy Code

child element determination = = = if (!! Window.find) HTMLElement.prototype.contains = function (B) { Return This.comparedocumentposition (B)-> 0 }; function Hide (DOM, Isclick) { var Nn,t,_isclick =!! Isclick; try { for (var n in objlist) { nn = objlist[n]; t = nn.getoption ("target") [0]; if (_isclick && (t = = Dom | | t.contains (DOM)) return; if (!_isclick | |!nn.box[0].contains (DOM)) nn.hide (); } catch (e) { } }

3. In the above hide method, the Isclick variable determines whether the click of a transaction triggers. In order to deal with the punishment resize. Resize use settimeout for handling punishment, landing memory consumption.

code is as follows	copy code
var retime = Null     $ (window). Bind ("Resize", function () {         if ( Retime) cleartimeout (retime);         retime = settimeout (hide, 50);    });