Why won't my span do a JQuery event click when I click it?

Question

.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;
}

I draw the span like this: <span class="tablePlayButton"></span>

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

$(".tablePlayButton").click(function(){
        alert('hi');
    });

Answer 1

You're probably adding the click handler before the element is created.

Try moving the Javascript code after the element, or wrapping it in $(function() { ... }); to make it run after the document loads.

Answer 2

Is there any text in it? For an inline element, you usually have to click on a visible something inside it. Change the span so that it has the text "SPAN" in it, and see if you can click on it then.

Answer 3

rewrite as

 $(document).ready(function() {

        $(".tablePlayButton").click(function() {
            alert('hi');
        });

    });