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

重写为

 $(document).ready(function() {

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

    });

Answer 3

里面有文字吗？对于内联元素，您通常必须单击其中的可见内容。更改范围，使其中包含文本“SPAN”，然后查看是否可以单击它。

当我单击它时，为什么我的span不会执行JQuery事件点击？

3 个答案: