Django模板中script.js的.testimonial-slider函数无法执行求助

问题描述 #

我正在学习Django，尝试给首页适配Bootstrap模板，当前代码结构如下，遇到的问题是：script.js中初始化Slick轮播的$('.testimonial-slider').slick()函数无法执行，但把这段代码放到testimonial.html里就能正常运行。

当前代码结构 #

home.html（基础模板） #

{% load static %}

<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{title}}</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link rel="stylesheet" href="{% static 'lib/AdminLTE-3.2.0/plugins/fontawesome-free-6.4.0/css/all.min.css' %}">
  <link rel="stylesheet" href="{% static 'lib/AdminLTE-3.2.0/css/adminlte.min.css' %}">
  <script src="{% static 'lib/AdminLTE-3.2.0/plugins/jquery/jquery.min.js' %}"></script>
  <script src="{% static 'lib/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.min.js' %}"></script>
  <script src="{% static 'lib/AdminLTE-3.2.0/js/adminlte.min.js' %}"></script>
  <script src="{% static 'lib/sweetalert2-9.10.0/sweetalert2.all.min.js' %}"></script>
  <script src="{% static 'js/functions.js' %}"></script>
  {% block head %}
  {% endblock %}
</head>
{% block body %}
{% endblock %}
</html>

index.html（继承基础模板） #

{% extends 'home.html' %}

{% load static %}

{% block head %}
<link rel="shortcut icon" type="image/x-icon" href="{% static 'homepage/images/favicon.png' %}" />
<link rel="stylesheet" href="{% static 'homepage/plugins/themefisher-font/style.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/bootstrap/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/lightbox2/css/lightbox.min.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/animate/animate.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/slick/slick.css' %}">
<link rel="stylesheet" href="{% static 'homepage/css/style.css' %}">
<script src="{% static 'homepage/plugins/jquery/jquery.min.js' %}"></script>
<script src="{% static 'homepage/plugins/parallax/jquery.parallax-1.1.3.js' %}"></script>
<script src="{% static 'homepage/plugins/lightbox2/js/lightbox.min.js' %}"></script>
<script src="{% static 'homepage/plugins/slick/slick.min.js' %}"></script>
<script src="{% static 'homepage/plugins/filterizr/jquery.filterizr.min.js' %}"></script>
<script src="{% static 'homepage/plugins/smooth-scroll/smooth-scroll.min.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU"></script>
<script src="{% static 'homepage/plugins/google-map/gmap.js' %}"></script>
<script src="{% static 'homepage/js/script.js' %}"></script>
{% endblock %}
{% block body %}
<body id="body">
  <div id="preloader">
    <div class='preloader'>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
{% include 'header.html' %}
{% include 'principal.html' %}
<!-- 省略部分页面代码 -->
{% include 'testimonial.html' %}
{% include 'blog.html' %}
{% include 'footer.html' %}
</body>
{% endblock %}

testimonial.html（轮播片段） #

{% load static %}
{% block head %}
{% endblock %}
<section class="testimonial section" id="testimonial">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="testimonial-slider">
                    <!-- 轮播项 -->
                    <div class="item text-center">
                        <i class="tf-ion-chatbubbles"></i>
                        <div class="client-details">
                            <p>Lorem ipsum dolor sit amet...</p>
                        </div>
                        <div class="client-thumb">
                            <img loading="lazy" src="{% static 'homepage/images/client-logo/clients-1.jpg' %}" class="img-fluid" alt="">
                        </div>
                        <div class="client-meta">
                            <h3>William Martin</h3>
                            <span>CEO , Company Name</span>
                        </div>
                    </div>
                    <!-- 省略其他轮播项 -->
                </div>
            </div>
        </div>
    </div>
</section>

homepage/js/script.js（问题函数） #

(function ($) {
  'use strict';
  // 省略其他代码
  /*BELOW IS THE PROBLEM!!!!!!!!!!!!!!!!*/
  $('.testimonial-slider').slick({
    infinite: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000
  });
  // 省略其他代码
})(jQuery);

原因分析 #

• DOM加载顺序错误：你在index.html的head区块里加载了script.js，此时页面的DOM元素（包括.testimonial-slider）还没渲染生成。JS代码执行时找不到目标元素，初始化自然失败。而把代码放到testimonial.html里，代码是在DOM元素之后加载的，此时元素已经存在，所以能正常执行。
• jQuery重复加载冲突：home.html的head中已经加载了一次jQuery，index.html的head又重复加载了一次，这会覆盖jQuery的上下文环境，可能导致Slick插件无法正确绑定到jQuery对象上。

解决方法 #

1. 调整JS文件的加载位置 #

把index.html中head区块里的所有JS文件，移到body区块的末尾（所有HTML内容之后），确保DOM完全渲染后再加载执行JS代码：

{% extends 'home.html' %}
{% load static %}

{% block head %}
<!-- 只保留CSS和图标链接，移除所有JS -->
<link rel="shortcut icon" type="image/x-icon" href="{% static 'homepage/images/favicon.png' %}" />
<link rel="stylesheet" href="{% static 'homepage/plugins/themefisher-font/style.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/bootstrap/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/lightbox2/css/lightbox.min.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/animate/animate.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/slick/slick.css' %}">
<link rel="stylesheet" href="{% static 'homepage/css/style.css' %}">
{% endblock %}

{% block body %}
<body id="body">
  <div id="preloader">...</div>
  {% include 'header.html' %}
  {% include 'principal.html' %}
  {% include 'testimonial.html' %}
  {% include 'blog.html' %}
  {% include 'footer.html' %}

  <!-- JS文件移到此处，DOM渲染完成后再加载 -->
  <script src="{% static 'homepage/plugins/parallax/jquery.parallax-1.1.3.js' %}"></script>
  <script src="{% static 'homepage/plugins/lightbox2/js/lightbox.min.js' %}"></script>
  <script src="{% static 'homepage/plugins/slick/slick.min.js' %}"></script>
  <script src="{% static 'homepage/plugins/filterizr/jquery.filterizr.min.js' %}"></script>
  <script src="{% static 'homepage/plugins/smooth-scroll/smooth-scroll.min.js' %}"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU"></script>
  <script src="{% static 'homepage/plugins/google-map/gmap.js' %}"></script>
  <script src="{% static 'homepage/js/script.js' %}"></script>
</body>
{% endblock %}

2. 移除重复的jQuery加载 #

删除index.html中的<script src="{% static 'homepage/plugins/jquery/jquery.min.js' %}"></script>，保留home.html里的jQuery引用（因为AdminLTE依赖它），避免重复加载导致的上下文冲突。

3. 可选：用DOM就绪事件包裹初始化代码 #

如果不想调整JS加载位置，也可以在script.js中把轮播初始化代码放到jQuery的$(document).ready()事件里，确保DOM完全加载后再执行：

(function ($) {
  'use strict';
  // 省略其他代码
  $(document).ready(function() {
    $('.testimonial-slider').slick({
      infinite: true,
      arrows: false,
      autoplay: true,
      autoplaySpeed: 2000
    });
  });
  // 省略其他代码
})(jQuery);

内容的提问来源于stack exchange，提问作者Joe R.