Question

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

在chrome dev工具中，下面的所有内容都已加载。

<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();
    });

Answer 1

你需要将你的代码放在jQuery的Dom Ready函数中的script.js中，就像这样;

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

有关详细信息，请http://api.jquery.com/ready/

Answer 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>

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

2 个答案: