Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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