Почему не происходит делегирование событий, если я упоминаю самый удаленный селектор?

Question

Пусть я сделать 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 работает. Но разве это не работало в первом примере? Donn't .outer .inner и .inner выбрать тот же элемент DOM?

Answer 1

Из документов JQuery селектор вы передадите это: строка

Селектор для фильтрации потомков отдельных элементов , которые вызывают событие

Так .outer .inner не работает, поскольку такой элемент не существует внутри.outer, который запускает событие.