Question

我在单独的脚本中有以下代码：

$(document).ready(function() {
    $('body').css('background-color', "#" + getRandomInt(10, 99) + getRandomInt(0, 99) + getRandomInt(0, 99));
    $('span').click(function(e) {
        for(var i = 0; i < 100000; i++) {
            console.log('TESEEEEEEEEEEEEEEET');
        }
        var clicked_button = $(e.target);
        add_post_part(clicked_button);
    });
});

function add_post_part(clicked_button) {
    var number_of_post_parts = $('#content .post-part').length;


}

/**
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

这是HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <!-- basic stylesheet -->
        <link rel="stylesheet" type="text/css" href="static/css/general.css">

        <!-- jQuery -->
        <script language="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>

        <!-- my own scripts -->
        <script language="text/javascript" src="static/js/post_parts.js"></script>

        <title>Blog Post</title>
    </head>
    <body>
        <div id="content">
            <span>Title:</span><br>
            <textarea class="post-part post-title" id="post_part_0"></textarea><br>
            <input class="add-post-part-button" type="button" value="add part"/>
            <input class="remove-post-part-button" type="button" value="remove part"/><br><br>

            <span>Text:</span><br>
            <textarea class="post-part post-text" id="post_part_1"></textarea><br>
            <input class="add-post-part-button" type="button" value="add part"/>
            <input class="remove-post-part-button" type="button" value="remove part"/><br><br>  
        </div>
    </body>
</html>

当我在html页面的源代码视图中单击我自己的脚本名称时，它会正确地显示脚本，因此浏览器（尝试使用FF，OP，Chromium）可以找到它，但无论我做什么，代码永远不会运行。

我希望在点击页面上的任何span元素时运行它。此外，我已经尝试在文档就绪后插入一个简单的console.log("")，但也永远不会执行。

我的代码出了什么问题？我的浏览器突然失去了运行本地js文件的能力吗？

我一直在努力让我的浏览器记录一个简单的输出，但似乎没有什么能解决它。开始怀疑我是否是代码盲目的东西。

修改＃1： 我重新加载页面时的控制台输出： GET http://localhost:5000/makepost [HTTP/1.0 200 OK 2ms] GET http://localhost:5000/static/css/general.css [HTTP/1.0 304 NOT MODIFIED 3ms] GET http://code.jquery.com/jquery-2.1.3.js [HTTP/1.1 304 Not Modified 37ms] GET http://localhost:5000/static/js/post_parts.js [HTTP/1.0 304 NOT MODIFIED 2ms] JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead ScriptSurrogate.js:344:209 GET http://localhost:5000/static/img/bg/footer_lodyas.png [HTTP/1.0 304 NOT MODIFIED 2ms]

修改＃2： 解决方案在其中一个答案中找到：它必须是 <script *type*="..." src="..."></script> 并不是 <script *language*="..." src="..."></script>

显然，当我用它来做其他事情的时候，我脑子里仍然有这种语言属性。

Answer 1

我改变了：

 <script language="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>

要：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>

它对我有用。

Answer 2

我认为它确实运行了，但是控制台记录了10k次，因此它锁定了浏览器。运行此项，单击标题，您将看到我添加的警报。我注释了循环迭代10k次。

$(document).ready(function() {
    $('body').css('background-color', "#" + getRandomInt(10, 99) + getRandomInt(0, 99) + getRandomInt(0, 99));
    $('span').click(function(e) {
        //for(var i = 0; i < 100000; i++) {
        alert('TESEEEEEEEEEEEEEEET');
        //}
        var clicked_button = $(e.target);
        add_post_part(clicked_button);
    });
});

function add_post_part(clicked_button) {
    var number_of_post_parts = $('#content .post-part').length;


}

/**
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
        <meta charset="utf-8" />

        <title>Blog Post</title>
    </head>
    <body>
        <div id="content">
            <span>Title:</span><br>
            <textarea class="post-part post-title" id="post_part_0"></textarea><br>
            <input class="add-post-part-button" type="button" value="add part"/>
            <input class="remove-post-part-button" type="button" value="remove part"/><br><br>

            <span>Text:</span><br>
            <textarea class="post-part post-text" id="post_part_1"></textarea><br>
            <input class="add-post-part-button" type="button" value="add part"/>
            <input class="remove-post-part-button" type="button" value="remove part"/><br><br>  
        </div>
    </body>

jQuery代码被忽略了

2 个答案: