如何在Django中运行HTML与jQuery代码？滑块函数失效排查与解决

开发者阿泽

2026-5-13

在Django中运行HTML与jQuery的正确方式，以及slideToggle失效的解决办法

一、先聊聊怎么在Django里正常跑HTML和jQuery

咱们Django用的是模板继承机制，一般都会有个base.html作为基础模板，里面已经包含了<html>、<head>、<body>这些页面核心骨架，还有全局的样式和脚本资源。子模板只需要通过{% extends %}继承它，然后在{% block content %}里填充页面独有的内容就行——千万别在子模板里重复写完整的<html>、<head>、<body>标签，这会直接搞乱最终页面的DOM结构。

至于jQuery的引入，建议直接在base.html里统一引入一次（比如放在<body>标签末尾，能提升页面加载速度），所有子模板都能共用这个jQuery实例，不用每个页面都重复引入，避免出现加载冲突。

二、你的slideToggle功能失效的核心原因

看你提供的代码，问题主要出在这两点：

重复的页面结构标签：你在{% block content %}里又写了一套<html>、<head>、<body>，但你的base.html肯定已经包含这些标签了！最终渲染出来的页面会出现嵌套的<html>/<body>结构，浏览器解析时会混乱，jQuery自然找不到#flip和#panel这两个目标元素。
可能的jQuery重复加载：如果base.html已经引入过jQuery，你在子模板里再引入一次，会导致jQuery实例被覆盖，之前绑定的点击事件直接失效。

三、一步步解决问题

第一步：修改子模板，移除多余的结构标签

把你的子模板改成下面这样，只保留核心内容、样式和脚本：

{% extends 'testapp/base.html' %}

{% block content %}
<style>
#panel {
    display: none;
}
</style>

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>
{% endblock %}

第二步：确保jQuery在基础模板中正确引入

打开testapp/base.html，检查是否已经引入了jQuery。如果没有，就在<body>标签的最后（</body>之前）添加这段代码：

<!-- 放在base.html的</body>标签前 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

这样所有子模板都能共用同一个jQuery实例，不会出现重复加载的冲突问题。

第三步：额外排查（如果还是失效）

按F12打开浏览器开发者工具，切换到Console标签查看报错：

如果提示$ is not defined，说明jQuery没有加载成功，检查引入的URL是否正确，或者可以换成国内CDN资源（比如百度的jQuery CDN）；
如果提示找不到元素，检查#flip和#panel的ID是否拼写正确，或者页面中是否存在重复的ID（同一个页面内ID不能重复）。

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

如何在Django中运行HTML与jQuery代码？滑块函数失效排查与解决

一、先聊聊怎么在Django里正常跑HTML和jQuery #

二、你的slideToggle功能失效的核心原因 #

三、一步步解决问题 #

第一步：修改子模板，移除多余的结构标签 #

第二步：确保jQuery在基础模板中正确引入 #