Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy jQuery ready event handler doesnt work?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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