Почему обработчик события jQuery ready не работает?

Когда я попыталсяПочему обработчик события jQuery ready не работает?

$(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 веб-консоли я получаю следующие 2 ошибки:

Ошибка:http://example.com/js/jquery.js в настоящее время присвоен// # sourceMappingURL, но уже имеет один

ТипError: $ .browser is undefined

Когда я удалял между файлом .ready() работал.

источник

2013-12-12 Stefanos Vakirtzis

window.load загрузится после загрузки DOM. Но document.ready загружен до загрузки DOM. – 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> тега это то же самое, используя $(document).ready(function(){}); в разделе <head>.

источник

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 ready не работает?

ответ

Смежные вопросы