The usage of delegate () method in jquery _jquery

The delegate () method adds one or more event handlers for the specified element (the child elements of the selected element) and specifies the function to run when these events occur. Let's take a look at the details below.

Syntax structure:

The code is as follows:

$ (selector). Delegate (Childofselector,type,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:

Listnode.delegate ('. Condition-remove ', ' click ', Function (e) {

e.preventdefault ();

$ (this). Parents ('. Search-condition-item '). Remove ();

}
);

Full instance

The code is as follows:

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:

$ (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:

The child element determines = = = = = = = =
 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.

The code is as follows:

var retime = null;
 $ (window). Bind ("Resize", function () {
  if (retime) cleartimeout (retime);
  Retime = settimeout (hide, M);