Jquery not loading in head but loading on bottom of body tag
Question
Here is my problem: as title says, jQuery is working only when I put the scripts on the bottom of the body tag. When I put them in head they are not working. I am using just some simple jQuery scripts
This is my <head> :
<head>
<title>P site</title>
<link rel='stylesheet' href='style.css'/>
<link rel='stylesheet' type='text/css' href='jquery/css/ui-lightness/jquery-ui-1.10.4.css'/>
<link rel='stylesheet' type='text/css' href='jquery/time/jquery.ui.timepicker.css'/>
<style type="text/css">
<!--
.pagNumActive {
color: #000;
border:#060 1px solid; background-color: #D2FFD2; padding-left:3px; padding-right:3px;
}
.paginationNumbers a:link {
color: #000;
text-decoration: none;
border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
}
.paginationNumbers a:visited {
color: #000;
text-decoration: none;
border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
}
.paginationNumbers a:hover {
color: #000;
text-decoration: none;
border:#060 1px solid; background-color: #D2FFD2; padding-left:3px; padding-right:3px;
}
.paginationNumbers a:active {
color: #000;
text-decoration: none;
border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
}
-->
</style>
<?php
require 'connect.inc.php';
require 'function.php';
?>
The <body> has 500+ rows so I'll just show you how the jQuery is loaded at very bottom:
<script type='text/javascript' src='jquery/js/jquery-1.10.2.js'></script>
<script type='text/javascript' src='jquery/js/jquery-ui-1.10.4.js'></script>
<script type='text/javascript' src='jquery/time/jquery.ui.timepicker.js'></script>
<script type='text/javascript' src='jquery/js/ui.js'></script>
Where is the problem , why can't I load them in <head> tag?
5 answers
solution1
1 ACCPTED 2014-04-20 03:07:04
The way jQuery, or JavaScript for that matter, works is it detects elements or binds events at the time when the script itself is called. As the document is loaded from top to bottom, placing jQuery at the bottom makes sure your DOM is loaded first, before executing JS. On the other hand, you can place jQuery at top, using technique such as this:
$(document).ready(function() {
console.log('jQuery is now ready to be executed!');
// Place jQuery code here...
});
This is basically telling jQuery, wait until DOM is loaded, before acting upon it.
Source: http://api.jquery.com/ready/
solution2
0 2014-04-20 02:51:30
i dont think your problem is where to load jquery, its how to use it for example put jquery in head and try this :
$(document).ready(function(){
alert('document is fully loaded and jquery can access all elements now !');
})
solution3
0 2014-04-20 03:05:35
if it works when the code is below body is that the items are already loaded, I do not know if you placed your code inside the jQuery ready function.
example:
$( document ).ready(function() {
$( "p" ).text( "The DOM is now loaded and can be manipulated." );
});
source: http://api.jquery.com/ready/
solution4
0 2014-04-20 10:15:08
Thanks guys I found the solution for my problem , you guys are really awesome .. If anyone have same problem here is what i dd and it works ...
As @Jaimil Prajapati , @Damen Salvatore and @coder_ck said i just need to put my jquery code inside document ready function .. Here is what i put in head and now it works :)
<head>
<script type='text/javascript' src='jquery/js/jquery-1.10.2.js'></script>
<script type='text/javascript' src='jquery/js/jquery-ui-1.10.4.js'></script>
<script type='text/javascript' src='jquery/time/jquery.ui.timepicker.js'></script>
<script>
$(document).ready(function() {
console.log('jQuery is now ready to be executed!');
$('#date').datepicker({ dateFormat: 'dd/mm/yy'});
$('#time').timepicker();
$(function() {
$( document ).tooltip();
});
});
</script>
</head>
solution5
0 2020-04-16 16:22:54
如果有人遇到同样的问题，我通过在添加 jQuery 库时设置字符集 UTF8 来解决它，如下所示：
<script type="text/javascript" charset="utf8" src="../jquery-3.2.1.min.js" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.