Django中外部静态文件加载的JavaScript无法执行问题求助

1. 先查浏览器控制台报错 #

按F12打开开发者工具，切到「控制台」标签，点击按钮看有没有报错：

• 要是提示call_counter is not defined：说明函数没在全局作用域里
• 要是提示$ is not defined：说明jQuery没加载成功或者顺序错了

2. 确认函数在全局作用域 #

内联onclick只能调用全局作用域的函数，确保你的call_counter是全局的：

// 正确写法：直接定义为全局函数
function call_counter(url, pk) {
    window.open(url);
    $.get('YOUR_VIEW_HERE/'+pk+'/', function (data) {
        alert("counter updated!");
    });
}

// 或者显式挂载到window（避免局部作用域问题）
window.call_counter = function(url, pk) {
    // 函数逻辑...
};

别把函数包在局部作用域里（比如$(function(){...})里），那样内联onclick找不到。

3. 清浏览器缓存 #

浏览器可能缓存了旧的JS文件，导致新代码没生效：

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新
• 也可以给静态资源加版本号：{% static 'js/test.js' %}?v=1

4. 确认jQuery加载顺序 #

确保jQuery在你的test.js之前加载，你的base.html里已经这么写了，但可以再核对一遍：

<!-- 先加载jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- 再加载自定义JS -->
<script src="{% static 'js/test.js' %}"></script>

5. 推荐替换内联onclick（更稳妥的写法） #

内联事件容易出作用域问题，换成jQuery事件绑定更好维护：
修改base.html：

<button class="counter-btn" data-url="http://www.google.com" data-pk="12345">
  I update object 12345
</button>
<button class="counter-btn" data-url="http://www.yahoo.com" data-pk="999">
  I update object 999
</button>

修改test.js：

$(function() {
  $('.counter-btn').on('click', function() {
    const url = $(this).data('url');
    const pk = $(this).data('pk');
    window.open(url);
    $.get('YOUR_VIEW_HERE/' + pk + '/', function(data) {
      alert("counter updated!");
    });
  });
});

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