Django项目中AJAX请求成功后Owl Carousel轮播组件无法正常工作问题咨询

架构老林

2026-9-24

二级分类轮播异常修复方案

故障根因

每次更新二级分类内容前，没有销毁之前初始化的owlCarousel实例，重复初始化导致DOM绑定事件、轮播结构冲突，无法正常触发轮播逻辑
动态拼接HTML时，a标签的id属性写了Django模板语法{{value.id}}，JS拼接字符串时不会解析该模板变量，会导致id属性异常

修复代码

你只需要调整AppendData函数逻辑即可，修正后代码如下：

function AppendData(data){
  const $secondCategory = $(".secondCategory");
  // 清空内容前先销毁旧的轮播实例
  if($secondCategory.hasClass('owl-loaded')){
    // 兼容owlCarousel 2.x版本
    $secondCategory.owlCarousel('destroy');
    // 如果是1.x版本，替换为下面的代码
    // $secondCategory.data('owlCarousel').destroy();
  }
  $secondCategory.empty();
  let htmls = '';
  if(data.length != 0){
    for (var i = 0; i < data.length; i++) {
      htmls += '<div class="item eight-card-single text-center">'
      // 修正id属性的模板语法错误，替换为实际的分类id
      htmls += '<a id="'+ data[i].id +'" class="second-category category">'
      htmls +='<img src="/media/uploads/products/logo.jpg">'  
      htmls +='<h5 id="'+ data[i].name +'" class="card-title">'+ data[i].name +'</h5>'
      htmls +='</a>'
      htmls +='</div>'
    }
    $secondCategory.append(htmls);
    // 初始化轮播，可按需调整配置参数
    $secondCategory.owlCarousel({
      items: 4,
      loop: false,
      margin: 10,
      nav: true
    });
  } else {
    $secondCategory.append("No data");
  }
}