Question

所以我有一个下拉列表的小提琴http://jsfiddle.net/3QuSm/1/。

    $(".image-box").mouseover(function() {
    $(".expand-box").show();   
}).mouseout(function() {
    $(".expand-box").hide();
});

这很好用，但是当我尝试将它集成到我的应用程序中时，JQuery不起作用。我对JQuery有点新意，我真的不知道把它放在哪里。我的代码类似于http://pastie.org/8042113。有什么帮助吗？

Answer 1

您需要使用$(document).ready()（或$(window).load()）。

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码后才会运行。包含在$（window）.load（function（）{...}）中的代码将在整个页面（图像或iframe）（而不仅仅是DOM）准备就绪后运行。

$(document).ready(function() {
    ... /* Your code here */
});

http://jsfiddle.net/3QuSm/5/

Answer 2

您需要将代码放在ready或load事件中，以便在创建页面中的元素后运行：

<script>

$(document).ready(function(){

  $(".image-box").mouseover(function() {
    $(".expand-box").show();
    alert("something");
  }).mouseout(function() {
    $(".expand-box").hide();
    alert("something");
  });

});

</script>

当您将代码放入jsfiddle时，它会默认将其放在load事件中，这就是为什么它在那里工作而不在您的页面中。

Answer 3

你需要等到DOM准备好进行操作将您的代码放在document.ready()

中

这里是小提琴：http://jsfiddle.net/3QuSm/8/

Answer 4

可能没有加载JQuery，导航到localhost中的那个页面，看到源代码，打开指向JQuery的链接，如果你能看到代码，它就被加载了。

尝试此操作以查看是否已加载JQuery。

<script type="text/javascript">
<!--
$(document).ready(function() {
  alert ("JQuery working!");
});
//-->
</script>

希望这有帮助。

无法让JQuery工作

4 个答案: