无法让JQuery工作

时间:2013-06-14 10:04:02

标签: jquery

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

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

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

4 个答案:

答案 0 :(得分:3)

您需要使用$(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/

答案 1 :(得分:2)

您需要将代码放在readyload事件中,以便在创建页面中的元素后运行:

<script>

$(document).ready(function(){

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

});

</script>

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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

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

希望这有帮助。