Detailed explanation of how to use jquery event delegate()_jquery

Let’s first look at what the official says about the delegate() method. The delegate() method adds one or more event handlers to the specified element (a child element of the selected element) and stipulates that it will be run when these events occur. Functions, event handlers using the delegate() method apply to the current or future elements (such as new elements created by a script).
The syntaxis very simple

$(selector).delegate(childSelector,event,data,function)

Parameter Description

• childSelector Required. Specifies one or more child elements to which event handlers are attached.
• event Required. Specifies one or more events to attach to the element.
• Multiple event values ​​separated by spaces. Must be a valid event.
• data Optional. Specifies additional data to be passed to the function.
• function required. Specifies a function to run when an event occurs.

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

listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();
});

Complete example (effect to be achieved)

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 the bound transaction, obtain the transaction source, call the hide method, and pass in the transaction source object:

$(document).delegate("body"， "click"， function(e) {
  var ev = e || window.event; // 事务
  //var target = ev.target || ev.srcElement; // 获得事务源
  hide(ev.target || ev.srcElement， true);
 });

$(window) was originally used, but before IE8, it seemed to have a bug.
The disadvantage of $(document) is that it will be triggered once after the page is loaded...
2. In the hide method, determine whether the transaction source is emitted from the specified element, that is, whether the transaction source element is a child element of the specified element or itself.

//子元素断定====
 if (!!window.find)HTMLElement.prototype.contains = function(B) {
  return this.compareDocumentPosition(B) - 19 > 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 hide method above, the isClick variable determines whether the click event is triggered. In order to handle resize. Resize uses settimeout for processing to reduce memory consumption.

var reTime = null;
 $(window).bind("resize"， function() {
  if (reTime) clearTimeout(reTime);
  reTime = setTimeout(hide， 50);
 });

The above is about the usage of jquery event delegate(). I hope it will be helpful to everyone's learning.