Let's see what the official says. Delegate () method, 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, using the delegate () The event handlers for the method apply to current or future elements, such as new elements created by the script.
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.
Listnode.delegate ('. Condition-remove ', ' click ', Function (e) {
e.preventdefault ();
$ (this). Parents ('. Search-condition-item '). Remove ();
});
Full instance (effect to be implemented)
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:
$ (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 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.
var retime = null;
$ (window). Bind ("Resize", function () {
if (retime) cleartimeout (retime);
Retime = settimeout (hide, m);
The above is about the jquery event delegate () the use of the relevant content, I hope to help you learn.