爲什麼當我點擊它時，我的跨度不會執行JQuery事件點擊？

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

我得出這樣的跨度：<span class="tablePlayButton"></span>

它有一個小按鈕。當我點擊它時，什麼也沒有發生：

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

Answer 1

您可能在元素創建之前添加了點擊處理程序。

嘗試在元素之後移動Javascript代碼，或者將其包裝在$(function() { ... });中以使其在文檔加載後運行。

Answer 2

它有任何文字嗎？對於一個內聯元素，你通常必須點擊一個可見的其中的東西。改變跨度，使其中包含文本「SPAN」，然後查看是否可以點擊它。

Answer 3

改寫爲

$(document).ready(function() { 

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

    });