$(this) refers to $(window) instead of clicked element inside .click() method

Question

I am attempting to access child elements within an unordered list, but I'm not getting the values I expected.

Here is my HTML code:

<ul id="weekdayList">
  <li>
    <label for="sunday">S</label>
    <input id="sunday" type="checkbox" name="sunday">
  </li>
  <li>
    <label for="monday">M</label>
    <input id="monday" type="checkbox" name="monday">
  </li>
  <li>
    <label for="tuesday">T</label>
    <input id="tuesday" type="checkbox" name="tuesday">
  </li>
  <li>
    <label for="wednesday">W</label>
    <input id="wednesday" type="checkbox" name="wednesday">
  </li>
  <li>
    <label for="thursday">T</label>
    <input id="thursday" type="checkbox" name="thursday">
  </li>
  <li>
    <label for="friday">F</label>
    <input id="friday" type="checkbox" name="friday">
  </li>
  <li>
    <label for="saturday">S</label>
    <input id="saturday" type="checkbox" name="saturday">
  </li>
</ul>

And the JS code:

$(document).ready(() => {
  // Make labels active when corresponding checkbox is checked
  $('#weekdayList label').click((event) => {
    event.stopPropagation();

    console.log($(this));
    console.log($('#weekdayList li:nth-child(2) label'));
    $(this).toggleClass('active');
  });
});

CodePen here: https://codepen.io/mattmc318/pen/mdyEeJy

When I click on the 'M' label, for example, I expect the output of console.log($(this)); to be the same as console.log($('#weekdayList li:nth-child(2) label'));.

Instead of this:

Object { 0: label, length: 1, prevObject: Object(1) }

I get this:

Object [ Window ]

Is there something I'm doing wrong? Any help is appreciated.

Did you try to made the click event function on outside of document.ready ? — MR. A, Dec 12 '19 at 02:33
It's because `this` inside an arrow function is in its higher scoped context. — StackSlave, Dec 12 '19 at 02:56

score 2 · Accepted Answer · answered Dec 12 '19 at 02:45

2

you're using arrow function, so, $(this) is not correctly. Instead of

$('#weekdayList label').click((event) => {
});

Please use this:

$('#weekdayList label').click(function (event) {
    // You can use $(this) here
});

answered Dec 12 '19 at 02:45

quachtinh761

224
1
7

This doesn't change anything. Even when I changed the function inside `$(document).ready();`, the output is the same and the labels don't change color. – Matt McCarthy Dec 12 '19 at 02:49
This helped, actually, but my click function is being called twice. That's why I thought this change didn't help earlier. Any thoughts on that? – Matt McCarthy Dec 12 '19 at 02:54
@MattMcCarthy what did you see that indicates the click event is being fired twice? – Matt U Dec 12 '19 at 03:00
The output was doubled in the code example, but not my original code. I was targeting `#weekdayList li` in my example, but it only fires once when I changed it back. Problem solved. Thanks, all! – Matt McCarthy Dec 12 '19 at 03:05

score 0 · Answer 2 · answered Dec 12 '19 at 03:06

$(document).ready(() => {
  // Make labels active when corresponding checkbox is checked
  /*$("#weekdayList li").click(function(event){
    event.stopPropagation();
    
    console.log($(this));
    console.log($('#weekdayList li:nth-child(2) label'));
    $(this).toggleClass('active');
  })*/
  
  $('#weekdayList li').click((event) => {
    event.stopPropagation();
    
    console.log($(event.currentTarget));
    console.log($('#weekdayList li:nth-child(2) label'));
    $(event.currentTarget).toggleClass('active');
  });
});

arrow function is ES6, this not always target to current element. please refer to jQuery this with ES6

$(this) refers to $(window) instead of clicked element inside .click() method

2 Answers2