jQuery class selector and click()

Question

I'm currently trying to get an alert to happen when something is clicked. I can get it working in jsFiddle, but not in production code:

jsFiddle example that works (jQuery 1.5 loaded)
HTML (in case jsFiddle is inaccessible):

<!DOCTYPE HTML><html><head><title>Test</title></head>
<body> <h1>25 Feb 2011</h1><h3>ABC</h3><ul>
        <li class="todoitem">Test&mdash;5 minutes</li> </ul>
</body></html>

Javascript:

$(".todoitem").click(function() {
alert('Item selected');
});

Non-working production example:

<!DOCTYPE HTML><html><head><title>Test</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(".todoitem").click(function() {
        alert('Item selected');
        });
    </script>
</head>
<body>
<h1>25 Feb 2011</h1><h3>ABC</h3><ul><li class="todoitem">Test&mdash;5 minutes</li></ul>
</body>
</html>

Safari's Inspector indicate that jQuery is being loaded correctly, so that's not the issue. As far as I can tell, these two pieces of code are essentially identical, but the latter isn't working. Can anyone see what I've done wrong?

JohnP · Accepted Answer · 2011-02-26 07:23:24Z

21

You need to wrap your code in $(document).ready()

This will work

$(document).ready(function(){
        $(".todoitem").click(function() {
            alert('Item selected');
        });
});

JSfiddle does this for you automatically

answered Feb 26, 2011 at 7:23

JohnP

50k13 gold badges112 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

S L · Accepted Answer · 2011-02-26 07:26:02Z

2

Wrap the code inside

$(function (){

})

And you have the working code

$(function (){

    $(".todoitem").click(function() {
        alert('Item selected');
    });

})

answered Feb 26, 2011 at 7:26

S L

14.3k18 gold badges81 silver badges119 bronze badges

Collectives™ on Stack Overflow

jQuery class selector and click()

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related