清除缓存后,JQuery不工作

JQuery not working after cache cleared

本文关键字:工作 JQuery 缓存 清除      更新时间:2023-09-26

JQuery不工作后,我按ctrl点击f5(刷新和清除chrome缓存)。但奇怪的是,当我在代码的顶部添加一个alert语句时,这个问题就消失了。
我的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>

除了我提到的警告语句。

当您需要对尚未加载的资源(如图像)执行某些操作时,通常会发生这种情况。按F5会重载页面中的所有资源,而正常导航不会。

尝试将您的$(function(){ });调用替换为以下之一:

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

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

当页面缓存刷新时,json文件必须再次加载。我试图在加载之前使用JSON变量。

这可能是因为您的代码是在jQuery加载之前执行的。我猜警报会给浏览器足够的时间来检索jQuery。你可以查看network选项卡,看看jquery是否在你的代码执行之前被加载,如果没有,那就是你应该做的