放在head标签中的jQuery代码不起作用
[英]Jquery Code not working when placed in head tag
问题描述
i have some jquery code which doesn't work when placed inside the head tag but works when placed after the body tag. 
我有一些jquery代码，当放在head标签内时不起作用，但是当放在body标签后时起作用。 Even though it is inside document.ready() it isn't working. 即使它在document.ready（）内部，也不起作用。
Here is my code: 这是我的代码：
$(document).ready(function() {
for (i = 1950; i <= new Date().getFullYear(); i++) {
$('#from').append($('<option />').val(i).html(i));
$('#to').append($('<option />').val(i).html(i));
}
})
Here is my Structure 这是我的结构
< head>
<script type="text/javascript" src="scripts/jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="/easyoffice/js/excelExport.js"></script>
<script type="text/javascript" src="/easyoffice/js/tinytable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
for (i = 1950; i <= new Date().getFullYear(); i++) {
$('#from').append($('<option />').val(i).html(i));
$('#to').append($('<option />').val(i).html(i));
}
})
function checkyear() {
var from = $('select[id=to]').val();
var to = $('select[id=from]').val();
if (from == 'Select' || to == 'Select') {
alert(" Please Select an Year ")
return false;
} else if (from <= to) {
alert(" Please Select an Year greater than From Year ")
$("select#to").prop('selectedIndex', 0);
return false;
} else {
return true;
}
}
</script>
</head>
3 个解决方案
解决方案1
4 2016-08-22 07:01:55
please check sequence of where you have added yout jquery file in head tag? 请检查在head标签中添加了jquery文件的位置的顺序？ it should be 它应该是
<script src="your_jquery_library_file.js" type="text/javascript"></script>
//Then
<script type="text/javascript">
$(document).ready(function() {
for (i = 1950; i <= new Date().getFullYear(); i++) {
$('#from').append($('<option />').val(i).html(i));
$('#to').append($('<option />').val(i).html(i));
}
})
</script>
解决方案2
0 2016-08-22 07:35:12
$(document).ready() simply ensures that all DOM elements are loaded before your javascript is loaded. $（document）.ready（）只是确保在加载JavaScript之前先加载所有DOM元素。
When it doesn't matter 没关系的时候
Without waiting for this event to fire, you may end up manipulating DOM elements or styles that are yet to exist on the page. 在不等待此事件触发的情况下，您可能最终要处理页面上尚不存在的DOM元素或样式。 the DOM ready event also allows you more flexibility to run scripts on different parts of the page. DOM ready事件还使您可以更加灵活地在页面的不同部分上运行脚本。 For example: 例如：
<div id="map"></div>
<script type="text/javascript">
document.getElementById('map').style.opacity = 0;
</script>
will run because the map div has been loaded before the script runs. 将运行，因为在脚本运行之前已加载了map div。 In fact, you can get some pretty good performance improvements by placing your scripts at the bottom of the page. 实际上，通过将脚本放在页面底部，您可以获得一些相当不错的性能改进。
When it does matter 什么时候重要
However, if you are loading your scripts in the element, most of your DOM has not loaded. 但是，如果要在元素中加载脚本，则大多数DOM都没有加载。 This example will not work: 此示例不起作用：
<script type="text/javascript">
document.getElementById('map').style.opacity = 0;
</script>
<div id="map"></div>
will not, since the map div has not been loaded. 不会，因为尚未加载map div。
It'll all depend on when certain parts of the code are executed. 这完全取决于代码的某些部分何时执行。 If they're in the header, then the elements they are attempting to access might/will* not exist yet. 如果它们在标题中，则它们尝试访问的元素可能/将*不存在。
解决方案3
0 已采纳 2016-11-10 05:41:25
I figured out what was the problem. 我找出了问题所在。 I put the ready function after the <body> tag and now it is working perfectly. 我将ready函数放在<body>标记之后，现在可以正常使用了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.