按ID获取元素不起作用

Question

Verry简单的问题：

我有这个HTML：

<div id="test" style="border: 1px solid red; width: 300px;">
    Some text
</div>

这个JS在一个单独的.js文件中：

$('#test').hover(function(){
    alert('it's working');
});

我没有从Fire Bug中得到任何错误，我在Google上搜索了很多内容。 请帮忙：为什么我的代码不起作用？

提前致谢

Answer 1

您需要等到加载DOM，否则，您的javascript将在#test之前运行。您可以通过将代码包装在ready函数中来实现，如下所示：

$(document).ready( function() {
    $('#test').hover(function(){
        alert("it's working");
    });
};

这是一个棘手的问题，很容易被忽视，因为你通过操作空选择实际上从jQuery中获得了错误。

或者，您可以简单地将脚本移动到页面底部，以便在其余DOM加载后执行，但我的偏好是以这种方式接近它。

Answer 2

你的问题很可能是＆＃34; ＆＃39; ＆＃34;你有警告信息，它会产生错误。

尝试删除它。

$('#test').hover(function(){
    alert('its working'); 
});

或者，看看这个小提琴：http://jsfiddle.net/7a4ts46s/

Answer 3

像这样包装你的函数：

$(document).ready(function() { 
    $('#test').hover(function(){
        alert('it\'s working');
    });
});

Answer 4

你有'在警告信息中 - '它正在工作'（第二个'无意中关闭了字符串） 你应该换到

$('#test').hover(function(){
    alert("it's working");
});

Answer 5

确保从html文件链接单独的.js文件。如果你把它放在底部，它应该工作：

<script src="your-file.js"></script>
</body>
</html>

或者在部分中链接它并等待DOM被加载，就像其他答案所说的那样。通常，我喜欢将我的.js文件<script>标记放在底部并等待DOM加载。

确保加载了.js文件，如果它没有从html页面链接，它将永远不会运行。一般调试提示：始终确保您实际运行您认为自己正在运行的文件：）