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 jQuery Basics Understanding jQuery Events and DOM Traversal Events with jQuery

David Regel
seal-mask
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points
Posted by David Regel
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points

What's wrong with my code?

This is the task I have to do:

Using the on() method, attach an event handler to handle click events on the ul element with the class of .student-list. Be sure to pass in the event object to the callback function.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h2>Student List</h2>

    <ul class="student-list">
        <li>James McAvoy</li>
        <li>Alena Holligan</li>
        <li>Wade Christensen</li>
        <li>Matt Krzyzynski</li>
    </ul>

    <script
    src="jquery-3.2.1.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

$('.student-list').on('click', 'ul', function(event){});

The challenge wants me to add a click-event to the "<ul>" elements with the class of ".student-list".This is why my jQuery is waiting for clicks on my "<ul>" elements. My code is not working. I have to delete 'ul' iny my code so it looks like this:

$('.student-list').on('click', function(event){});

What is wrong with my code? I get that it is not necessary to target the <ul> elemts directly because there aren't any more elements with the class of".student-list". According to my understanding, this means that it's unnecessary to target <ul> elements because there is no danger of confusion. But why is it actually wrong to target the <ul> element directly?

2 Answers

jacobproffer
jacobproffer
24,604 Points

Hey David,

My understanding is that the challenge test case is specifically checking for the class of '.student-list'. It's also best practice to not target elements directly. Consider the possibility of another unordered list being added in the future that required no functionality at all.

David Regel
seal-mask
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points
David Regel
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points

Thank you for your answer Jacob, this makes sense to me.

But do you know whether my code should work in theroy or is there some kind of typo or somehing like that? I would like to know whether the syntax is correct so I know how to handle a situation like that in case that I need it in the future. :)

RODRIGO MARTINEZ
RODRIGO MARTINEZ
5,912 Points
RODRIGO MARTINEZ
RODRIGO MARTINEZ
5,912 Points

The folowwing worked for me: $('.student-list').on('click', function(event) { });