Question

我有一些jquery代码，当放在head标签内部时不起作用，但在body标签后放置时起作用。即使它在document.ready（）内部也不起作用。

这是我的代码：

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

这是我的结构

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

Answer 1

请检查在head标签中添加yout jquery文件的顺序？它应该是

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

Answer 2

$（document）.ready（）只是确保在加载javascript之前加载所有DOM元素。

什么时候不重要

无需等待此事件触发，您最终可能会操纵页面上尚未存在的DOM元素或样式。 DOM ready事件还允许您更灵活地在页面的不同部分上运行脚本。例如：

    <div id="map"></div>
    <script type="text/javascript">
     document.getElementById('map').style.opacity = 0;
    </script>

将运行，因为在脚本运行之前已加载了map div。实际上，通过将脚本放在页面底部，您可以获得一些非常好的性能改进。

什么时候重要

但是，如果要在元素中加载脚本，则大多数DOM都未加载。这个例子不起作用：

    <script type="text/javascript">
    document.getElementById('map').style.opacity = 0;
    </script>
    <div id="map"></div>

不会，因为地图div尚未加载。

它全部依赖于代码的某些部分何时执行。如果他们在标题中，那么他们尝试访问的元素可能会/现在不存在。

Answer 3

我弄清楚问题是什么。我把准备好的函数放在$('#MyInputs').change(function() { draw(); });标记之后，现在它正常运行。

放置在head标签中时，Jquery Code无法正常工作

3 个答案: