Really, really simple jQuery that doesn't work :(

Question

Seriously. The simplest jQuery code ever simply isn't working.

<script type="text/javascript">
$(document).ready(function(){

 $('.codeswitcher').click(function() {
        alert("You clicked it");
 });

});
</script>

And then, in my page structure, I have this:

<div class="codeswitcher">
<img src="http://mysite.com/images/codeswitcher.png" alt="codeswitcher">
</div>

It's just a 32x32px image. And you can click it. But nothing happens! :( I've also changed my jQuery selector to .codeswitcher img and div.codeswitcher, but still nothing.

I have other jQuery code also running on the page just fine. What's going wrong?

Thanks!

Jack

Answer 1

First, you're not crazy, your example code works: http://jsfiddle.net/c3e6X/

Check to see if you have a JavaScript error before this code runs, just open the console and look.

If it's created dynamically, e.g. AJAX then you should use .live() instead, like this:

$(function() {
  $('.codeswitcher').live('click', function() {
    alert("You clicked it");
  });
});

Answer 2

Your code looks absolutly fine and is working. There is maybe another Javascript error somewhere else on your site or for some reason, jQuery isn't loaded correctly at the point you are executing this piece of code.