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 Working with jQuery Collections Stopping the Browser's Default Behavior

Posted by chloeguttridge
chloeguttridge
16,608 Points

No checkbox showing on page

I'm following the video regarding preventing default behaviour but when I preview my workspace I'm not seeing any checkbox? Am I looking at the wrong workspace?

4 Answers

Yazan Alhalabi
Yazan Alhalabi
10,483 Points
Yazan Alhalabi
Yazan Alhalabi
10,483 Points

Hi, i just faced the same problem and i figured it out, its really simple. you just need to edit the link you have copied from the html. <label><input type='checkbox'> Allow PDF downloads</label> , so all you have to do is change the single quote to double quote const $pdfCheckbox = $('<label><input type="checkbox"> Allow PDF downloads</label>'); and it will appear :)

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 help. Do you know why we have to change the single quote to dobule quote? I don't get why we have to do that. :/

Nelson J
Nelson J
7,411 Points

lifesaver just what the problem was +100

Amber Cyr
Amber Cyr
19,699 Points
Amber Cyr
Amber Cyr
19,699 Points

You are correct, the HTML seems to be missing from the workspace, however you can easily fix it yourself! just place a p tag under the unordered list tag with the appropriate HTML as shown below:

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Weekly</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="box">
    <h1>jQuery Weekly</h1>
    <div id="links">
        <ul>
            <li><a href='https://learn.jquery.com/'>Learn jQuery</a></li>
            <li><a href='http://treehouse-project-downloads.s3.amazonaws.com/jquery-basics/jquery_cheatsheet.pdf'>jQuery Cheatsheet</a></li>
            <li><a href='https://api.jquery.com/'>jQuery Documentation</a></li>
            <li><a href='https://developer.mozilla.org/en-US/docs/Glossary/jQuery'>jQuery Glossary</a></li>
    </ul>

       <!-- Use the code snippet below -->
    <p><input type="checkbox"> Allow PDF downloads</p>

    </div>
</div>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Jeff Sanders
PLUS
Jeff Sanders
Courses Plus Student 9,503 Points
Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

I'd replaced the p tag with a label tag, actually.