I have a click function for a parentelement. I want to detect now if the part I clicked has the class "child"

 
$( ".parent" ).click(function() {
    if ( $( this ).hasClass( "child" ) ) {
        console.log("child");
    }   
});

.child{background-color:pink}

<script src=".1.1/jquery.min.js"></script>


 <table style="width:100%">
  <tr class="parent">
    <th>Firstname</th>
    <th>Lastname</th>
    <th class="child">Age</th>
  </tr>
</table> 

I have a click function for a parentelement. I want to detect now if the part I clicked has the class "child"

 
$( ".parent" ).click(function() {
    if ( $( this ).hasClass( "child" ) ) {
        console.log("child");
    }   
});

.child{background-color:pink}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


 <table style="width:100%">
  <tr class="parent">
    <th>Firstname</th>
    <th>Lastname</th>
    <th class="child">Age</th>
  </tr>
</table> 

• javascript
• jquery
• dom-events

• 2 Does the function only have to do something if the clicked element has the class child? If so then use event delegation and let jQuery do the work for you: $(".parent").on("click", ".child", function() { /* <this> is the clicked "child" element */ }) – Andreas Commented Jan 11, 2018 at 15:51

2 Answers 2

access event.target, this always references the original target that created the event.

in this case the event started with the .child and bubbled up to .parent which hit this listener... at this point, this and event.currentTarget will reference the .parent element.. but target will still reference the origin element, .child.

$( ".parent" ).click(function(e) {
    if ( $( e.target ).hasClass( "child" ) ) {
        console.log("child");
    }   
});

JSFiddle Demo

Also, unless you have another reason to have the listener on .parent, you could just add the listener directly to the child like this:

$( ".parent .child" ).click(function() {
    console.log("child");
});

You can use event.target to determine the original target of the click:

$(".parent").click(function(e) {
  if ($(e.target).hasClass("child")) {
    console.log("child");
  }
});

.child {
  background-color: pink
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table style="width:100%">
  <tr class="parent">
    <th>Firstname</th>
    <th>Lastname</th>
    <th class="child">Age</th>
  </tr>
</table>