使用 dom 而不是选择器的 Jquery 委托答案

【问题标题】：Jquery delegate with a dom instead of selector使用 dom 而不是选择器的 Jquery 委托
【发布时间】：2016-02-22 10:10:19
【问题描述】：

我以前使用 .on 如下：

$( elements ).on( events, selector, data, handler );
=> 
$div=$('<div />');
$div.on('click',fn(){...});

但是对于委托，我们有：

$( elements ).delegate( selector, events, data, handler );

和

$div.delegate...

不起作用！.
在这种情况下，我没有选择器，只有 Dom。我该怎么办？
提前致谢。

【问题讨论】：

你用的是哪个版本的jQuery？
目前使用的是 JQuery 2.1.3 ，有关系吗？
从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。然而，对于早期版本，它仍然是使用事件委托的最有效方法。有关事件绑定和委托的更多信息在 .on() 方法中。
基本上你想完成什么？
其实我是用delegate来给元素添加事件，以后会添加到文档中，

标签： jquery

【解决方案1】：

selector 只能是字符串。要使用 DOM 元素或 jq 匹配集，您可以在处理程序中对其进行过滤，例如：

$( document).on( "click", null, data, handler );

//later
var $div=$('<div />');

function handler(event){
   if($(event.target).closest($div).length)
     //do some stuff
}

$(document).on("click", null, {
  data: "some data"
}, handler);

//later
var $div = $('<div />').html('the DIV to call handler');
$div.appendTo('body');

function handler(event) {
  if ($(event.target).closest($div).length) {
    //do some stuff   
    alert('handler call for the DIV');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  other div, no click event bound
</div>

【讨论】：

谢谢，它起作用了，但是处理函数中的 $(this) 不起作用。
$( document).on(options.openerEvent , function(){ th=$(this); if($(event.target).closest(options.openerSelector).length) { / /activeSelector=th;loadFiles(options.homePath); } });
其实这里指的是文档
但是你可以使用 call() 来重置上下文。
如果事件是点击，我怎样才能获得点击的元素？因为我有多个选择器。谢谢