Why won't my span do a JQuery event click when I click it?
<pre><code>.tablePlayButton {
display: block;
width: 16px;
background: transparent;
margin-top:2px;
margin-right: -10px;
margin-left: 2px;
height:17px;
}

tr:hover .tablePlayButton {
background: url(ton.png) top left no-repeat;
}

tr:hover .tablePlayButton:active {
background-position: bottom left;
}

tr:hover .tablePlayButton.playing,
.tablePlayButton.playing {
background: url(ton2.png) top right no-repeat;
}

tr:hover .tablePlayButton.playing:active,
.tablePlayButton.playing:active {
background-position: bottom right;
}
</code></pre>

<p>I draw the span like this: <code>&lt;span class="tablePlayButton"&gt;&lt;/span&gt;</code></p>

<p>It's got a little button. WHen I click it, nothing happens:</p>

<pre><code>$(".tablePlayButton").click(function(){
        alert('hi');
    });
</code></pre>
