Why jQuery ready event handler doesnt work?

Question

When i tried

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

nothing happens but when i try

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

all works.Due to the fact that load() works means that my jQuery file reference is correct.

so anybody can tell me why this isn't working?

My HTML markup is :

<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: Between

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

and

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

i had an other file :

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

which contained:

$(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');
        })
  }
});

and according to my Firefox web console i was getting the following 2 errors:

Error: http://example.com/js/jquery.js is being assigned a //# sourceMappingURL, but already has one

TypeError: $.browser is undefined

When i removed the in between file .ready() worked.

window.load will load after your DOM is loaded. But document.ready is loaded before the DOM is loaded — Illaya, Dec 12 '13 at 14:59
This may helpful to you.... http://stackoverflow.com/questions/5182016/what-is-the-difference-between-window-load-and-document-ready — Illaya, Dec 12 '13 at 15:00
@Illaya I think i can understand the difference between those two but stil since we are talking about a single alert shouldnt .ready(); be working also? Does the fact that .ready(); doesnt work mean anything specific? — Stefanos Vakirtzis, Dec 12 '13 at 15:01

fortegente · Accepted Answer · 2013-12-12T15:25:02.190

1

$(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");
});

And of course if you call a function that is placed next to the closing </body> tag it's the same thing as using $(document).ready(function(){}); in the <head> section.

edited Dec 12 '13 at 15:25

answered Dec 12 '13 at 15:06

fortegente

1,361
2
11
22

Your answer was better than mine. suggest you edit to add tip: `.ready()` should be placed towards end of DOM whenever feasible. – Brian Vanderbusch Dec 12 '13 at 15:16

score 0 · Answer 2 · answered Dec 12 '13 at 15:04

Try this..... This may work.

<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>

Why jQuery ready event handler doesnt work?

2 Answers2