动态加载内容下JavaScript轮播功能失效问题求助

这问题我之前做项目时也踩过坑！原因很简单：你一开始写的点击事件只绑定在了页面初始加载就存在的DOM元素上，通过AJAX动态加载进来的新article里的轮播按钮（dots、prev/next）根本没被绑定事件，所以点击自然没反应。下面给你两个靠谱的修复方案，推荐第一个：

事件委托的核心思路是把事件绑定到页面加载时就存在的父元素（比如document或者分类容器.a/.b），利用事件冒泡机制，当点击新添加的子元素时，父元素会捕获到事件并处理。这种方式不用每次AJAX加载后都重新绑定事件，代码更高效简洁。

替换你原来的轮播事件代码为以下jQuery版本（既然你已经在用jQuery写AJAX，用它处理事件委托更方便）：

// 处理dots点击事件的委托
$(document).on('click', '.dot', function() {
  const $dot = $(this);
  // 找到当前轮播容器下的所有幻灯片
  const $slides = $dot.closest('.slideshow-container').find('.mySlides');
  const $dotsParent = $dot.parent();

  // 移除所有dot和幻灯片的激活状态
  $dotsParent.children('.dot').removeClass('active');
  $slides.removeClass('active-slide');

  // 获取当前点击dot的索引，添加激活状态
  const dotIndex = $dotsParent.children('.dot').index($dot);
  $dot.addClass('active');
  $slides.eq(dotIndex).addClass('active-slide');
});

// 处理prev/next按钮点击事件的委托
$(document).on('click', '.slideshow-container a', function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  const $btn = $(this);
  const $container = $btn.closest('.slideshow-container');
  const $slides = $container.find('.mySlides');
  const $dots = $container.find('.dot');

  // 获取当前激活的幻灯片和dot
  const $currentSlide = $slides.filter('.active-slide');
  const $currentDot = $dots.filter('.active');

  // 移除当前激活状态
  $currentSlide.removeClass('active-slide');
  $currentDot.removeClass('active');

  // 处理next按钮逻辑
  if ($btn.hasClass('next')) {
    const $nextSlide = $currentSlide.next('.mySlides').length ? $currentSlide.next('.mySlides') : $slides.first();
    const $nextDot = $currentDot.next('.dot').length ? $currentDot.next('.dot') : $dots.first();
    $nextSlide.addClass('active-slide');
    $nextDot.addClass('active');
  } 
  // 处理prev按钮逻辑
  else if ($btn.hasClass('prev')) {
    const $prevSlide = $currentSlide.prev('.mySlides').length ? $currentSlide.prev('.mySlides') : $slides.last();
    const $prevDot = $currentDot.prev('.dot').length ? $currentDot.prev('.dot') : $dots.last();
    $prevSlide.addClass('active-slide');
    $prevDot.addClass('active');
  }
});

如果你不想改原来的事件绑定逻辑，也可以把轮播事件的代码封装成一个函数，在页面初始加载和每次AJAX请求成功后都调用这个函数，给新添加的元素绑定事件。

首先把原来的轮播代码封装成函数：

function initSlideshowEvents() {
  // 先移除已有的事件绑定，避免重复绑定导致多次触发
  const existingDots = document.getElementsByClassName('dot');
  for (let i = 0; i < existingDots.length; i++) {
    existingDots[i].onclick = null;
  }
  const existingLinks = document.querySelectorAll('.slideshow-container a');
  for (let i = 0; i < existingLinks.length; i++) {
    existingLinks[i].onclick = null;
  }

  // dots功能代码
  const dots = document.getElementsByClassName('dot');
  for (let i = 0; i < dots.length; i++) {
    dots[i].onclick = function() {
      const slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
      let index;
      for (let j = 0; j < this.parentNode.children.length; j++) {
        this.parentNode.children[j].classList.remove('active');
        slides[j].classList.remove('active-slide');
        if (this.parentNode.children[j] == this) {
          index = j;
        }
      }
      this.classList.add('active');
      slides[index].classList.add('active-slide');
    }
  }

  // prev/next功能代码
  const links = document.querySelectorAll('.slideshow-container a');
  for (let i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      const current = this.parentNode;
      const slides = current.getElementsByClassName("mySlides");
      const dots = current.getElementsByClassName("dot");
      const curr_slide = current.getElementsByClassName('active-slide')[0];
      const curr_dot = current.getElementsByClassName('active')[0];
      curr_slide.classList.remove('active-slide');
      curr_dot.classList.remove('active');

      if (this.className == 'next') {
        if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
          curr_slide.nextElementSibling.classList.add('active-slide');
          curr_dot.nextElementSibling.classList.add('active');
        } else {
          slides[0].classList.add('active-slide');
          dots[0].classList.add('active');
        }
      }
      if (this.className == 'prev') {
        if (curr_slide.previousElementSibling) {
          curr_slide.previousElementSibling.classList.add('active-slide');
          curr_dot.previousElementSibling.classList.add('active');
        } else {
          slides[slides.length - 1].classList.add('active-slide');
          dots[slides.length - 1].classList.add('active');
        }
      }
    }
  }
}

然后在你的AJAX代码里调用这个函数：

$(document).ready(function() {
  // 页面初始加载时绑定一次事件
  initSlideshowEvents();

  function getDataFor(category) {
    let flag = 0;
    function getData() {
      $.ajax({
        type: 'GET',
        url: 'get_data.php',
        data: { 'offset': flag, 'limit': 3, 'cat': category },
        success: function(data) {
          $('.' + category).append(data);
          flag += 3;
          // AJAX加载完成后，给新元素绑定事件
          initSlideshowEvents();
        }
      });
    }
    getData();

    const $window = $(window);
    const $document = $(document);
    $window.on('scroll', function() {
      if ($window.scrollTop() >= $document.height() - $window.height()) {
        getData();
      }
    });
  }

  getDataFor('a');
  getDataFor('b');
});

优先选方案一，事件委托不需要重复绑定事件，性能更好，代码也更简洁。方案二更适合不想改动原有事件逻辑的场景，但要注意每次绑定前先清除旧事件，避免重复触发。

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