JQuery not working after cache cleared
<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>