JQuery 单击和悬停在 div 上不起作用

Question

我有一个如下声明的 div，但是点击事件不起作用。 我还需要在 css 中使用 :hover 事件，但效果不佳。 有什么问题吗？

<div id="info-button" class="info-button"></div>

CSS

.info-button {
    position:absolute;
    top:-200px;
    left:50px;
    background-image: url('../img/info-icon.png');
    background-size: 100%;
    background-position: 0px 0px;
    width: 89px !important;
    display: inline-block;
    height: 89px;
    background-repeat: no-repeat;
}

JQuery

$("#info-button").click(function() {
    alert("click");  
});

我也试过

$("#info-button").on("click", function () {
    alert("click");
});

Answer 1

一定要把你的代码放在document.ready里面

$( document ).ready(function() {
   $("#info-button").click(function() {
    alert("click");  
    });
});

并在 Jquery 之后将您的脚本正确包含在 HTML 文档中，例如:

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/your_script.js"></script>