Databases
StackOverflow2013
Postsdbo
POWhy jQuery ready event handler doesnt work?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy jQuery ready event handler doesnt work?
    text
    copied!<p>When i tried </p> <pre><code>$(document).ready(function() { alert("TEST");}); </code></pre> <p>nothing happens but when i try </p> <pre><code>$(window).load(function() { alert("TEST");}); </code></pre> <p>all works.Due to the fact that <code>load()</code> works means that my jQuery file reference is correct. </p> <p>so anybody can tell me why this isn't working?</p> <p>My HTML markup is :</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet" type="text/css" href="css/general_styles.css"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="header"&gt; &lt;img src="img/loginlogo.png"/&gt; &lt;h1&gt;PRINSEAPALS&lt;/h1&gt; &lt;h3&gt;MARINE SERVICES&lt;/h3&gt; &lt;p&gt;"We deeply believe in the common good of all involved in making ships safer and seas cleaner."&lt;/p&gt; &lt;/div&gt; &lt;ul id="menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Services&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Fire Extinguishers&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Immersion Suits&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Breathing Apparatus&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Liferafts&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Lifeboats&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Fixed CO&lt;sub&gt;2&lt;/sub&gt; Systems&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Foam Analysis&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="slider"&gt; &lt;img id="img1" src="img/fire-extinguishers.jpg" /&gt; &lt;img id="img2" src="img/immersion-suit.jpg"&gt; &lt;img id="img3" src="img/breathing-apparatus.jpg"&gt; &lt;img id="img4" src="img/liferaft.jpg"&gt; &lt;img id="img5" src="img/lifeboat.jpg"&gt; &lt;img id="img6" src="img/fixed-co2.jpg"&gt; &lt;img id="img7" src="img/foam analysis.jpg"&gt; &lt;/div&gt; &lt;footer&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Lifeboats&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Lifeboats&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Lifeboats&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/footer&gt; &lt;/div&gt; &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/slider.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>UPDATE</strong>: Between</p> <p><code>&lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;</code></p> <p>and</p> <p><code>&lt;script type="text/javascript" src="js/slider.js"&gt;&lt;/script&gt;</code></p> <p>i had an other file :</p> <p><code>&lt;script type="text/javascript" src="js/IE6.js"&gt;&lt;/script&gt;</code></p> <p>which contained:</p> <pre><code>$(function() { if ($.browser.msie &amp;&amp; $.browser.version.substr(0,1)&lt;7) { $('li').has('ul').mouseover(function(){ $(this).children('ul').css('visibility','visible'); }).mouseout(function(){ $(this).children('ul').css('visibility','hidden'); }) } }); </code></pre> <p>and according to my Firefox web console i was getting the following 2 errors:</p> <p><strong>Error:</strong> <a href="http://example.com/js/jquery.js" rel="nofollow">http://example.com/js/jquery.js</a> is being assigned a //# sourceMappingURL, but already has one</p> <p><strong>TypeError:</strong> $.browser is undefined</p> <p>When i removed the in between file <code>.ready()</code> worked.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload