点击添加记录按钮报Uncaught ReferenceError，加载jQuery后正常求解决

问题分析 #

从你描述的症状和代码来看，核心问题是多个jQuery版本冲突导致页面JavaScript执行环境异常，进而让自定义的addRecord函数无法被正确识别。

具体来看你的base.html，在<head>里连续加载了三个不同版本的jQuery：

1. jQuery 3.4.1
2. jQuery 3.1.1
3. jQuery 1.12.0

每次加载新的jQuery都会覆盖全局的$和jQuery变量，这种重复加载不仅浪费资源，更会破坏页面的JS执行上下文——可能导致后续定义的函数（比如addRecord）无法被挂载到全局作用域，或者被意外覆盖。而你手动加载3.4.1版本后恢复正常，正是因为这个版本覆盖了之前冲突的低版本，修复了执行环境。

另外，虽然你的addRecord函数定义在按钮之前，但冲突的jQuery可能干扰了脚本的执行顺序或作用域，导致函数无法被onclick事件找到。

解决步骤 #

1. 移除重复的jQuery加载（最关键）

修改base.html的<head>部分，只保留一个稳定的jQuery版本（推荐保留3.4.1，因为你测试过这个版本有效）：

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'style.css' %}"/>
    <title>{% block title %}{% endblock %}</title>
    <!-- 只保留一个jQuery版本 -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

2. 优化事件绑定方式（可选但更可靠）

避免使用inline的onclick属性，改用jQuery的事件绑定，这样可以避免作用域问题，同时确保DOM加载完成后再绑定事件：
修改okay.html的内容：

{% extends "s/base.html" %} {% load staticfiles %} {% block content %}
<script>
$(document).ready(function() {
    // 绑定点击事件
    $('.btn-primary').click(function() {
        console.log('hhhffhgfhdf');
        addRecord();
    });

    function addRecord(){
        console.log('addRecord 函数已执行');
    }
});
</script>
<div>
    <button type="button" class="btn btn-primary">Add New Advert</button>
</div>
{% endblock %}

3. 排查验证步骤

• 打开浏览器控制台（F12），查看是否有其他脚本加载错误；
• 在控制台输入addRecord，如果能输出函数代码，说明函数已正确定义；
• 点击按钮，查看控制台是否有预期的日志输出，确认功能正常。

内容的提问来源于stack exchange，提问作者obri