javascript - How can I detect a child element by clicking on a parent element? - Stack Overflow

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

Share Improve this question Follow edited Jan 11, 2018 at 15:56 Smern 19.1k2222 gold badges7777 silver badges9393 bronze badges asked Jan 11, 2018 at 15:46 peace_lovepeace_love 6,4711414 gold badges8585 silver badges184184 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>