Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

Posted by Ewerton Luna
.a{fill-rule:evenodd;}techdegree seal-36
Ewerton Luna
Full Stack JavaScript Techdegree Graduate 24,031 Points

Double click doesn't work

My code is exactly like Treasure's

$('ul').on('dblclick', 'li', () => {
    $(this).toggleClass('strike');
});

Am I missing something? It doesn't do anything when I double click any list items.

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

I added a console.log statement to log this. Here is your code:

$('ul').on('dblclick', 'li', () => {
    console.log(this)
    $(this).toggleClass('strike');
});

and the results

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Here is the code from the video:

$('ul').on('dblclick', 'li', function() {
    console.log(this)
    $(this).addClass('strike');
});

and the results

<li class="strike">Port of Call</li>
Ewerton Luna
.a{fill-rule:evenodd;}techdegree seal-36
Ewerton Luna
Full Stack JavaScript Techdegree Graduate 24,031 Points

Thanks, Kris. I appreciate the answer. But I still don't know why 'this' is not referencing an li element on the first block of code. My code is pretty much the same of Treasure's. The only thing different is that I'm using the arrow syntax and she isn't. Is there some compatibility issue with arrow syntax and the keyword 'this' when using jQuery? I made a little research and it seems like the answer is yes. I'm didn't dive too deep into it because didn't have the oportunity.

When I write using arrow syntax in this way, the code works:

$('ul').on('dblclick', 'li', (e) => {
    console.log(e.target);
    $(e.target).addClass('strike');
});