jQuery По событию получить объектный слушатель

Question

У меня есть эта разметка:

<div class="foo">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
</div>

Если я хочу прикрепить щелчок ко всем дочерним элементам, я сделаю:

var foo = $('.foo').on('click', ".child", function(e, data){
   //get foo here?
})

При щелчке дочернего элемента, как я могу получить здесь foo? Не обращайте внимания на тот факт, что я знаю здесь, что foo является родительским элементом для дочернего элемента, по которому был выполнен щелчок. (не уверен, что ближайший будет работать, но здесь снова будут использоваться селекторы, есть ли более прямой метод?)

Answer 1

Используйте jQuery s Event.delegateTarget для ссылки на «родительский» элемент, являющийся элементом, к которому был прикреплен обработчик событий (".foo" в вашем случае):

$('.foo').on('click', ".child", function(e, data){
   console.log(e.delegateTarget)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo">
   <div class="child">1</div>
   <div class="child">2</div>
   <div class="child">3</div>
</div>

Подводя итог, скажем, вы щелкните <span>, который находится в <li>, который находится в делегаторе <ul> element

<ul><li>Lorem <span>ut florem</span></li>

и имеющий:

$("ul").on("click", "li", function(evt) {

• evt. delegateTarget = <ul>…
• evt. currentTarget = <li>…
• эвт. цель = <span>…