I have this markup:
<div class="foo">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
If I want to attach click to all children I will do:
var foo = $('.foo').on('click', ".child", function(e, data){
//get foo here?
})
When child is clicked how can I get foo here? Disregard the fact that I know here that foo is the parent of clicked child. (not sure closest would work but that would be using selectors again, is there a more direct method?)
Use jQuery's Event.delegateTarget to refer to the "parent" element, being the Element on whom the event handler was attached (".foo" in your case):
$('.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>To recap, say you click on a <span> which is in a <li> which is in a delegator <ul> element
<ul><li>Lorem <span>ut florem</span></li>
and having:
$("ul").on("click", "li", function(evt) {
<ul>…<li>…<span>…