外部 JS/jQuery 文件正在加载但未执行答案

【问题标题】：External JS/jQuery files are loading but not executing外部 JS/jQuery 文件正在加载但未执行
【发布时间】：2014-02-16 18:22:24
【问题描述】：

我正在加载以下所有库和文件，但由于某些原因，只有 CSS 正在执行，而没有外部 js 文件。 scripts.js 文件包含我所有的 jQuery，并且它的格式似乎正确。我不确定为什么 CSS 会执行，而不是 jQuery。

在 chrome 开发工具中，以下所有内容均已加载。

<head>
    <!DOCTYPE html>
    <meta charset=utf-8 />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='scripts/spectrum.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='scripts/scripts.js') }}"></script>
</head>

这是 scripts.js 文件的一部分：

$("span.output").draggable({
    stop: function(event, ui) {}
});

$('input[type=file]').change(
    function() {
        $('#submitbutton').click();
    });

$("#text_submit").submit(
    function(event) {
        $("#text1").html($("#1").val());
        $("#text2").html($("#2").val());
        $("#text3").html($("#3").val());
        $("#text4").html($("#4").val());
        $("#text5").html($("#5").val());
        $("#text6").html($("#6").val());
        $("#text7").html($("#7").val());
        $("#text8").html($("#8").val());
        $("#text9").html($("#9").val());
        $("#text10").html($("#10").val());
        $("#slider1").show();
        $("#slider2").show();
        $("#slider3").show();
        $("#slider4").show();
        $("#slider6").show();
        $("#slider7").show();
        $("#slider8").show();
        $("#slider9").show();

        event.preventDefault();
    });

【问题讨论】：

"{{" ... "}}" 的内容是否正在评估？您的服务器/模板引擎是否可能没有替换那里的内容？
您的 doctype 声明位于错误的位置，应该在其他所有内容之前，您能否显示实际渲染的输出，如果那是渲染的输出，那么正如迈克尔所说，您的模板没有正确渲染。
@MichaelAaronSafyan 是的，这是烧瓶模板，它工作正常，因为一切都加载到开发工具中。
你的 js 代码是否在 domready 函数中运行？喜欢jQuery(document).ready(Function(){});
@PatrickEvans 不，不是。我应该将我所有的 jquery 都包含在您发布的内容中吗？

标签： javascript jquery html css flask

【解决方案1】：

你需要把你的代码放在 JQuery 的 Dom Ready 函数中的 script.js 中，像这样；

$(document).ready(function(){
    // Your code here
});

欲了解更多信息，http://api.jquery.com/ready/

【讨论】：

【解决方案2】：

试试下面的方法，在你的 jquery 加载方式中不声明 type="text/javascript" 也可能是一个问题。

<head>
    <!DOCTYPE html>
    <meta charset=utf-8 />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/spectrum.js"></script>
    <script type="text/javascript" src="scripts/scripts.js"></script>
</head>

【讨论】：