放在head標簽中的jQuery代碼不起作用

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標簽中添加了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>

不會，因為尚未加載map div。

這完全取決於代碼的某些部分何時執行。 如果它們在標題中，則它們嘗試訪問的元素可能/將*不存在。

Answer 3

我找出了問題所在。 我將ready函數放在<body>標記之后，現在可以正常使用了。

放在head標簽中的jQuery代碼不起作用

問題描述

3 個解決方案

解決方案1
4 2016-08-22 07:01:55

解決方案2
0 2016-08-22 07:35:12

解決方案3
0 已采納 2016-11-10 05:41:25

放在head標簽中的jQuery代碼不起作用

問題描述

3 個解決方案

解決方案1 4 2016-08-22 07:01:55

解決方案2 0 2016-08-22 07:35:12

解決方案3 0 已采納 2016-11-10 05:41:25

解決方案1
4 2016-08-22 07:01:55

解決方案2
0 2016-08-22 07:35:12

解決方案3
0 已采納 2016-11-10 05:41:25