Js 文件加载不正确答案

【问题标题】：Js files not loading properlyJs 文件加载不正确
【发布时间】：2015-04-23 00:44:07
【问题描述】：

CSS 文件似乎可以正确加载。 JS 文件似乎也加载了，但它们都处于非活动状态，控制台上没有错误消息。

我的文件是：

    <head>
    <link rel="stylesheet" href="/static/libs/font-awesome4/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/static/libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/script.js"></script>
    <link rel="stylesheet" href="/_debug_toolbar/static/css/toolbar.css?0.7082793798424954" type="text/css">
</head>

唯一特定于站点的文件是 script.js。 Script.js 是下面的短代码：

$.fn.countdown = function (callback, duration, message) {
    message = message || "";
    var container = $(this[0]).html(duration + message);
    var countdown = setInterval(function () {
        if (--duration) {
            container.html(duration + message);
        } else {
            clearInterval(countdown);
            callback.call(container);   
        }
    }, 1000);
};

// Use p.countdown as container, pass redirect, duration, and optional message
$(".countdown").countdown(submit_on_time, 30, "s remaining");

// Function to be called after 5 seconds
function submit_on_time () {
    $('#interview-form').submit();
}

我很难找到这个问题的根源。

【问题讨论】：

你好像忘了$(document).ready()

标签： javascript jquery python flask

【解决方案1】：

您的脚本位于<head> 部分中，在任何元素可用之前，因此$(".countdown") 返回一个空对象。
您需要添加$(document).ready() 或将脚本放在底部，就在</body> 之前（或至少在您尝试访问的元素下方）。

$.fn.countdown = function (callback, duration, message) {
    message = message || "";
    var container = $(this[0]).html(duration + message);
    var countdown = setInterval(function () {
        if (--duration) {
            container.html(duration + message);
        } else {
            clearInterval(countdown);
            callback.call(container);   
        }
    }, 1000);
};

// Function to be called after 5 seconds
function submit_on_time () {
    $('#interview-form').submit();
}

// Use p.countdown as container, pass redirect, duration, and optional message

$(document).ready(function() {
    $(".countdown").countdown(submit_on_time, 30, "s remaining");
});

【讨论】：