In the click event Jquery how is $(this)?

Question

I have click event with jquery and i want to know how is selector clicked...

$('#parent').on('click','#child',function(){
 //....
});  


<div id="parent">
 <div id="child">
 </div>
</div>    

$(this) is #parent or #child ?

Answer 1

It's the child, why did you not just try

$('#parent').on('click','#child',function(){
    console.log($(this));
});  

 $('#parent').on('click','#child',function(){ console.log($(this)); });

 #child { width: 50px; height: 50px; cursor: pointer; background-color: orange; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"> <div id="child"></div> </div>

Answer 2

The context this is related to the event target. In your case is #child .

Further, you don't need event delegation when the id is available, so bind that event as follow:

$('#child').on('click',function(){
 //....
}); 

Answer 3

This is called Event delegation which allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

So, $(this) here is always referring to the clicked child element to a parent element, which here is #child .

A simple dynamically added element demo:

 // Attach Event // on(events, selector, handler); $('#container').on('click', 'a', function(event) { event.preventDefault(); console.log('Anchor clicked!'); alert('Anchor clicked!'); }); // Create elements dynamically $('#container').append('<a href="#output">Click me!</a>');

 body{font:12px Tahoma,Arial,Helvetica,sans-serif;color:#333;margin:20px} h1{font-size:1.4em;margin-bottom:20px} h2{font-size:1.2em} #container{border:1px dashed #aaa;font-size:1em;padding:10px} a{color:green}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Dynamically added link:</h2> <div id="container"></div>

Answer 4

You could just write something like this to check.

 $(document).ready(function() { $('#parent').on('click','#child',function(){ console.log("This:", $(this)); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"> Parent <div id="child"> CHILD (click on it) </div> </div>