如果我提到最外层的选择器，为什么事件委托不起作用？答案

【问题标题】：Why don't event delegation work if I mention the outermost selector?如果我提到最外层的选择器，为什么事件委托不起作用？
【发布时间】：2017-05-29 18:14:42
【问题描述】：

假设我通过在目标名称中提及最外层的选择器来委托 mouseover 事件：

$(".outer").on("mouseenter", ".outer .inner", function() {

  console.log("YES");

});

.outer {
  background: green;
  padding: 20px;
}
.inner {
  padding: 10px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <span class="inner">
    Hover
  <span>  
</div>

在$(".outer").on("mouseenter", " .outer .inner",... 中如果我在.outer .inner 中没有提到.outer，那么代码的工作方式为：

$(".outer").on("mouseenter", ".inner", function() {

  console.log("YES");

});

.outer {
  background: green;
  padding: 20px;
}
.inner {
  padding: 10px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <span class="inner">
    Hover
  <span>  
</div>

现在您可以在控制台中看到 mouseenter 事件起作用了。但它在第一个例子中不起作用吗？不要.outer .inner 和.inner 选择同一个DOM 元素？

【问题讨论】：

简单地省略第二个参数：$(".outer").on("mouseenter",function...

标签： javascript jquery dom dom-events jquery-events

【解决方案1】：

从 jQuery 文档中，您传入的选择器是：

一个选择器字符串来过滤被选元素的后代触发事件

所以.outer .inner 不起作用，因为触发事件的.outer内部不存在这样的元素。

【讨论】：