将 JQuery 与 Django base.html 模板一起使用答案

【问题标题】：Using JQuery with Django base.html template将 JQuery 与 Django base.html 模板一起使用
【发布时间】：2013-05-02 16:30:33
【问题描述】：

我正在使用 Django-1.4.5。和 JQuery，我的模板系统有问题：我有带有脚本和 JQuery 函数的 base.html，但是当我尝试在另一个模板（扩展 base.html）中使用选项卡时，它没有显示出来。这是我的 base.html：

<head>
<meta charset="utf-8">
<link href="{{ STATIC_URL }}/css/custom-theme/jquery-ui-1.10.2.custom.css" rel="stylesheet">
<script src="{{ STATIC_URL }}/js/jquery-1.9.1.js"></script>
<script src="{{ STATIC_URL }}/js/jquery-ui-1.10.2.custom.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}/css/style.css" type="text/css" />
<script>
$(function() {
    $("#accordion1").accordion({
        heightStyle: "content",
    });
    $('#accordion2').accordion({
        heightStyle: "content",
    })
    $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#tabs-li").removeClass("ui-corner-top").addClass("ui-corner-left");
});

还有我的另一个模板：

{% extends "base.html" %}
{% block title %}{% endblock %}
{% block head %}
{% endblock %}
{% block content %}
<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li>
        <li><a href="#tab5">Tab 5</a></li>
    </ul>
    <div id="tab1"><p>Text 1</p></div>
    <div id="tab2"><p>Text 2</p></div> 
    <div id="tab3"><p>Text 3</p></div>
    <div id="tab4"><p>Text 4</p></div>
    <div id="tab5"><p>Text 5</p></div>
</div>
{% endblock %}

当我在 base.html 中切换选项卡时，它可以正常工作。我无法弄清楚为什么当我扩展 base.html 时它不起作用。提前感谢您的回答。

【问题讨论】：

我建议使用staticfiles 应用程序来使用static 模板标签，而不是{{ STATIC_URL }}，后者不太灵活。
请详细说明“它不起作用”。根本没有尸体？只是 Javascript/jQuery 不将此 div 转换为选项卡？页面来源是否符合您的期望？您的浏览器中有任何 Javascript 控制台错误吗？任何 Django 错误？等
你有没有找到解决这个问题的方法？我正在使用 django，jquery 使用基本模板，并且出于某种奇怪的原因在 index.html 模板中工作。但是jquery代码在扩展base.html模板的其他页面中不起作用

标签： jquery django

【解决方案1】：

与

{% block head %}
{% endblock %}

您正在丢弃base.html 中head 块中的所有内容。我猜你的 base.html 模板在这个块中包含了所有的 javascript 源代码。

只需省略这两行。 head 块将被继承。

【讨论】：

不，我已经试过了。无论有无头块，结果都是一样的。

【解决方案2】：

我在你的 base.html 中看不到{% block content %}{% endblock %}，你能写吗？

也许您正在模板中使用{% block head %}{% endblock %} 重新编写头部？

【讨论】：

我在 base.html 中的内容在标记中（我有两个手风琴），脚本在标记中。我只在这个其他模板中使用 {% block content %}{% endblock %}，结束它是空的，如您所见。
@Gogo 您的问题中包含的 base.html 模板中没有 content 块。在扩展它的模板中定义一个是行不通的。