如何在base模板加载jQuery完成后执行child模板内的JavaScript代码

推荐优先使用新增模板块的规范方案，无需额外监听事件，性能和可维护性最好。

方案1：新增页脚脚本专属Block（推荐） #

步骤1：修改base模板 #

在jQuery引入代码的下方新增一个空的块，专门用来放置各个子模板的专属脚本：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    .
    .
</head>
<body>
{% block content %}

{% endblock %}
<script src="path/to/jQuery/library"></script>
<!-- 新增脚本块，位置在jQuery加载之后 -->
{% block extra_script %}{% endblock %}
</body>
</html>

步骤2：调整child模板的脚本位置 #

把原本写在content块里的专属脚本，移到新增的extra_script块中即可：

{% extends 'base_template.html' %}
{% block content %}
<h1>How you doing?</h1>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
   // 该代码仅为当前模板专属，不会在其他模板使用
   // 此时jQuery已经加载完成，可以正常调用
   $(function() {
       // 写入业务逻辑即可
   })
</script>
{% endblock %}

方案2：监听DOM加载事件（无需修改base模板） #

如果不方便修改base模板的结构，可以直接在child模板的脚本中监听DOMContentLoaded事件，该事件触发时整个DOM已经渲染完成，base模板末尾的jQuery已经加载执行完毕：

{% extends 'base_template.html' %}
{% block content %}
<h1>How you doing?</h1>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    // 此处可以正常调用jQuery
    console.log($)
})
</script>
{% endblock %}

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