jquery onhover works, onclick does not
<p>I've added a liking/disliking function my comics website.</p>

<p>I've made custom graphics for it. </p>

<ul>
<li><p>When a user hovers over selection, it will change, then swap back off hover... </p></li>
<li><p>When a user clicks, it will swap images until they click the same vote again, where it will switch back to the original.</p></li>
</ul>

<p><img src="http://i.stack.imgur.com/OKMRB.png" alt="enter image description here"></p>

<p>The on hover works, but the on click does not... I'm trying to implement this with Jquery:</p>

<pre><code>&lt;script type="text/javascript"&gt;
  var images = {
      "like": [
        "./images/SiteDesign/like_hover.png",
        "./images/SiteDesign/like.png",
        "./images/SiteDesign/liked.png"         
        ],
      "dislike": [
        "./images/SiteDesign/dislike_hover.png",
        "./images/SiteDesign/dislike.png",
        "./images/SiteDesign/disliked.png"
        ]);

jQuery(document).ready(function($) {
                $("#like, #dislike").hover(function(e) {
                     // mouseover handler
                     if (this.id in images) // check for key in map
                         this.src = images[this.id][0];
                }, function(e) {
                     // mouseout handler
                     if (this.id in images)
                         this.src = images[this.id][1];
                });

                $("#like, #dislike").click(function(e) {
                    alert("clicked");
                    if (this.id in images) // check for key in map
                         this.src = images[this.id][2];
                }, function(e) {
                     // mouseout handler
                     if (this.id in images)
                         this.src = images[this.id][1];
                });                     
            });
&lt;/script&gt;
</code></pre>

<p>Any thoughts? I've even put a alert("clicked") within the click function, but it's not even calling that.</p>
