キャッシュがクリアされた後にJQueryが機能しない

Question

Ctrlキーを押したままにするとJQueryが機能しません（クロムのキャッシュを更新してクリアします）。しかし、奇妙なことは、私のコードの上部に警告文を追加すると、この問題が解消されるということです。
私のjqueryはローカルファイルです。何が起きてる？

はまた、私のコードのすべては、私が追加言及警告声明を除き

<script type="text/javascript" src="javascript/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="javascript/main.js"></script> 

<script type="text/javascript"> 

    var json_screenSizes; 

    <!-- The function loadJSON is located in main.js (loaded above) --> 
    loadJSON("json/screenSizes.json", function (response) { 
     // Parse JSON string into object 
     json_screenSizes = JSON.parse(response); 
    }); 

    alert('read'); <!-- This causes code below to work on cache refresh */ 

    /* DOCUMENT READY */ 
    $(function() { 

     var xhr; 

     <!-- This on keyup code never calls on cache clearing but does on normal refresh --> 
     $(".search_dreams form input[type=search]").on("keyup", function() { 
      if (xhr && xhr.readyState != 4) { 
       xhr.abort(); 
      } 
      if ($(".search_dreams form input").val().length < 3) { /* If search input is empty */ 
       $(".search_dreams .results ul").html(""); 
       $(".search_dreams .results").hide(); 
       $(".search_dreams input.search").removeClass("orange"); 
       return; 
      } 
      xhr = $.ajax({ 
       type: 'GET', 
       url: 'searchDreams.php', 
       data: {numResults: 10, keyword: $(".search_dreams form input").val()}, 
       success: function (data) { 
        data = JSON.parse(data); 
        var output = ""; 
        alert("succes"); 

        /* ADD DREAM */ 
        for (var i in data) { 
         output += "<li class='addDream'>"; 
         /* Dream Name */ 
         output += "<div class='dream_name'><a href='google.com'>" + data[i].dreamName + "</a></div>"; 
         output += "<div class='button_container'><input class='addDream small orange' type='submit' value='Add Dream'></div>"; 
         /* Add dream button */ 
         output += "</li>"; 
        } 

        $(".search_dreams input.search").addClass("orange"); 

        $(".search_dreams .results").show(); 
        $(".search_dreams .results ul").html(output); 

       } 

      }); 
     }); 


    }); 
</script> 

です。

Answer 1

これは、通常、読み込まれていないリソース（画像など）で何かを行う必要がある場合に発生します。 F5キーを押すとページ内のすべてのリソースがリロードされますが、通常のナビゲーションではリロードされません。あなたのコードは、jQueryのロード前に実行されているためかもしれない

$(window).load(function() {}); 

または

$(document).on("pageinit", function() {}); 

Answer 2

：

は、次のいずれかを使用して$(function(){ });コールを交換してください。私は、アラートがブラウザにjQueryを取得するのに十分な時間を与えるだろうと思う。 ネットワークタブを見て、コードを実行する前にjqueryがロードされているかどうか確認してください。そうでない場合は

Answer 3

ページがキャッシュされたときに、jsonファイルは再度ロードしてください。 JSON変数がロードされる前にそれを使用しようとしていました。