为什么jQuery准备事件处理程序不起作用？

当我试图为什么jQuery准备事件处理程序不起作用？

$(document).ready(function() { alert("TEST");});

什么也不会发生，但是当我尝试

$(window).load(function() { alert("TEST");});

所有works.Due的事实，load()工作意味着我的jQuery的文件引用是正确的。

所以任何人都可以告诉我为什么这不起作用？

我的HTML标记是：

<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="css/general_styles.css"> 
    <title></title> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 
      <img src="img/loginlogo.png"/> 
      <h1>PRINSEAPALS</h1> 
      <h3>MARINE SERVICES</h3> 
      <p>"We deeply believe in the common good of all involved in making ships safer and seas cleaner."</p> 
     </div> 
      <ul id="menu"> 
       <li><a href="#">Home</a></li> 
       <li> 
        <a href="#">Services</a> 
        <ul> 
         <li><a href="#">Fire Extinguishers</a></li> 
         <li><a href="#">Immersion Suits</a></li> 
         <li><a href="#">Breathing Apparatus</a></li> 
         <li><a href="#">Liferafts</a></li> 
         <li><a href="#">Lifeboats</a></li> 
         <li><a href="#">Fixed CO<sub>2</sub> Systems</a></li> 
         <li><a href="#">Foam Analysis</a></li> 
        </ul> 
       </li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
     <div id="slider"> 
      <img id="img1" src="img/fire-extinguishers.jpg" /> 
      <img id="img2" src="img/immersion-suit.jpg"> 
      <img id="img3" src="img/breathing-apparatus.jpg"> 
      <img id="img4" src="img/liferaft.jpg"> 
      <img id="img5" src="img/lifeboat.jpg"> 
      <img id="img6" src="img/fixed-co2.jpg"> 
      <img id="img7" src="img/foam analysis.jpg"> 
     </div> 
     <footer> 
      <ul> 
       <li><a href="#">Lifeboats</a></li> 
       <li><a href="#">Lifeboats</a></li> 
       <li><a href="#">Lifeboats</a></li> 
      </ul> 
     </footer> 
    </div> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/slider.js"></script> 
</body> 
</html>

UPDATE：间

<script type="text/javascript" src="js/jquery.js"></script>

和

<script type="text/javascript" src="js/slider.js"></script>

我有其他文件：

<script type="text/javascript" src="js/IE6.js"></script>

其中包含：

$(function() { 
    if ($.browser.msie && $.browser.version.substr(0,1)<7) 
    { 
    $('li').has('ul').mouseover(function(){ 
     $(this).children('ul').css('visibility','visible'); 
     }).mouseout(function(){ 
     $(this).children('ul').css('visibility','hidden'); 
     }) 
    } 
});

，并根据我的Firefox Web控制台我居然也得到了以下两个错误：

错误：http://example.com/js/jquery.js被分配/ /＃sourceMappingURL，但已经有一个

TypeError： $ .browser is undefined

当我删除之间的文件.ready()工作。

来源

2013-12-12 Stefanos Vakirtzis

window.load会在加载DOM后加载。但是在DOM加载之前加载document.ready – Illaya

这可能对您有所帮助...... http://stackoverflow.com/questions/5182016/what-is-the-difference-between-window-load -and-document-ready – Illaya

@Illaya我认为我可以理解这两者之间的区别，但由于我们谈论的是单个警报shouldnt .ready（）;还在工作吗？ .ready（）;没有工作意味着什么具体？ –

$(document).ready(function() { 
    // executes when HTML-Document is loaded and DOM is ready 
    alert("document is ready"); 
}); 

$(window).load(function() { 
    // executes when complete page is fully loaded, including all frames, objects and images 
    alert("window is loaded"); 
});

如果调用被放在旁边的收盘</body>标签是同样的事情在<head>部分使用$(document).ready(function(){});的功能，当然还有。

来源

2013-12-12 15:06:19 fortegente

你的回答比我的好。建议您编辑以添加提示：只要可行，'.ready（）'应该放在DOM的尽头。 –

试试这个......这可能有用。

<html>

<script> 
    $(document).ready(function() { alert("TEST");}); 
</script> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
     <img src="img/loginlogo.png"/> 
     <h1>PRINSEAPALS</h1> 
     <h3>MARINE SERVICES</h3> 
     <p>"We deeply believe in the common good of all involved in making ships safer and seas cleaner."</p> 
    </div> 
     <ul id="menu"> 
      <li><a href="#">Home</a></li> 
      <li> 
       <a href="#">Services</a> 
       <ul> 
        <li><a href="#">Fire Extinguishers</a></li> 
        <li><a href="#">Immersion Suits</a></li> 
        <li><a href="#">Breathing Apparatus</a></li> 
        <li><a href="#">Liferafts</a></li> 
        <li><a href="#">Lifeboats</a></li> 
        <li><a href="#">Fixed CO<sub>2</sub> Systems</a></li> 
        <li><a href="#">Foam Analysis</a></li> 
       </ul> 
      </li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul> 
    <div id="slider"> 
     <img id="img1" src="img/fire-extinguishers.jpg" /> 
     <img id="img2" src="img/immersion-suit.jpg"> 
     <img id="img3" src="img/breathing-apparatus.jpg"> 
     <img id="img4" src="img/liferaft.jpg"> 
     <img id="img5" src="img/lifeboat.jpg"> 
     <img id="img6" src="img/fixed-co2.jpg"> 
     <img id="img7" src="img/foam analysis.jpg"> 
    </div> 
    <footer> 
     <ul> 
      <li><a href="#">Lifeboats</a></li> 
      <li><a href="#">Lifeboats</a></li> 
      <li><a href="#">Lifeboats</a></li> 
     </ul> 
    </footer> 
</div> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/slider.js"></script> 
</body> 
</html>

来源

2013-12-12 15:04:59 Illaya

为什么jQuery准备事件处理程序不起作用？

回答

相关问题