title: JQuery not working after cache cleared
body: <p>JQuery doesn't work after I ctrl click f5 (which refreshes and clears cache in chrome). But the odd thing is that this problem goes away when I add an alert statement at the top of my code.<br>
  My jquery is a local file. What's going on here?</p>
  
  <p>Also, all of my code is in </p>
  
  <pre><code>    &lt;script type="text/javascript" src="javascript/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="javascript/main.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var json_screenSizes;
  
      &lt;!-- The function loadJSON is located in main.js (loaded above) --&gt;
      loadJSON("json/screenSizes.json", function (response) {
          // Parse JSON string into object
          json_screenSizes = JSON.parse(response);
      });
  
      alert('read'); &lt;!-- This causes code below to work on cache refresh */
  
      /* DOCUMENT READY */
      $(function () {
  
          var xhr;
  
          &lt;!-- This on keyup code never calls on cache clearing but does on normal refresh --&gt;
          $(".search_dreams form input[type=search]").on("keyup", function () {
              if (xhr &amp;&amp; xhr.readyState != 4) {
                  xhr.abort();
              }
              if ($(".search_dreams form input").val().length &lt; 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 += "&lt;li class='addDream'&gt;";
                          /* Dream Name */
                          output += "&lt;div class='dream_name'&gt;&lt;a href='google.com'&gt;" + data[i].dreamName + "&lt;/a&gt;&lt;/div&gt;";
                          output += "&lt;div class='button_container'&gt;&lt;input class='addDream small orange' type='submit' value='Add Dream'&gt;&lt;/div&gt;";
                          /* Add dream button */
                          output += "&lt;/li&gt;";
                      }
  
                      $(".search_dreams input.search").addClass("orange");
  
                      $(".search_dreams .results").show();
                      $(".search_dreams .results ul").html(output);
  
                  }
  
              });
          });
  
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Except for the alert statement I mentioned adding. </p>