JavaScript 代码不适用于外部文件答案

【问题标题】：JavaScript code not working for external fileJavaScript 代码不适用于外部文件
【发布时间】：2019-05-27 22:05:01
【问题描述】：

我有将数据发送到后端的 JavaScript 代码，当我放置内联时它可以正常工作，但是当我放置在外部文件中时它不起作用。同时其他 JavaScript 正在外部文件中工作。

<script>
$('#submit-ajax').click(function(event) {
    console.log('working or not')
    $.post(
        '/order/detail/',
        {
            'test': 'hi i am here',
        },
        function() {
            alert( "Data Loaded: " );
        }
    )
});
</script>

在外部文件中的代码是：

$(document).ready(function(){
    $('#submit-ajax').click(function(event) {
        console.log('working or not')
        $.post(
            '/order/detail/',
            {
                'test': 'hi i am here',
            },
            function() {
                alert( "Data Loaded: " );
            }
        )
    });
}

【问题讨论】：

能不能把调用的内容贴在html文件里？
您是否在使用该按钮单击事件的那个 html 文件中给出了该 js 文件的引用？
请定义“它不起作用”。
您是否在 jquery 之后包含您的文件？
@sri sharka

标签： javascript jquery django web frontend

【解决方案1】：

我尝试了一个简单的例子，

HTML代码：你需要给的外部JS的相对路径

<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="(path of external js)\refJS.js"></script>

</head>
<body>
<div id="submit-ajax">
            click me
        </div>
</body>

在 JS 外部文件中：

$(document).ready(function(){
    $('#submit-ajax').click(function(event) {
        console.log('working or not');

    });
})

【讨论】：

是否有必要将这个名字命名为“refJS”。
它是一个 JS 文件名，我将其作为虚拟文件名供参考。您还需要在此处提供 data.js 文件名和文件路径。