页面刷新时Bootstrap轮播addEventListener报错的原因及解决方法

我有多页HTML，用jQuery的.load()加载代码片段，index.html里的加载代码如下：

$('#rotating-content').load(`./snippets/shared/rotating-content.html`);

rotating-content.html里包含两个Bootstrap轮播组件，我想在index.html中加载后用单个指示器控制两者同步切换，于是写了这段代码：

var carouselA = document.getElementById('carouselRotatingContent');
var carouselB = document.getElementById('carouselRotatingImage');
carouselA.addEventListener('slide.bs.carousel', function(e) {
    var bsCarouselB = bootstrap.Carousel.getInstance(carouselB)
    bsCarouselB.to(e.to)
})

首次加载页面时代码正常运行，但刷新页面后，会在carouselA.addEventListener(...)这一行报错：Cannot read properties of null (reading 'addEventListener')。我猜测是刷新后carouselA无法被识别，尝试把JS代码放到rotating-content.html里也没解决问题。

rotating-content.html的代码如下：

<div class="container-fluid ps-md-0 pe-md-0" id="rotating-wrapper">
  <div class="row g-0">
    <div class="col-md-4 col-lg-6 bg-image">
      <div id="carouselRotatingImage" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="..." alt="" class="img-fluid">
          </div>
          <div class="carousel-item">
            <img src="..." alt="" class="img-fluid">
          </div>
          <div class="carousel-item">
            <img src="..." alt="" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8 col-lg-6 rotating-content">
      <div class="inner-rotating-content">
        <div id="carouselRotatingContent" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <h3>Ipsum header</h3>
              <p>Ipsum content</p>
              <a href="#" class="btn btn-red" target="_blank">Learn More</a>
            </div>
            <div class="carousel-item active">
              <h3>Ipsum header</h3>
              <p>Ipsum content</p>
              <a href="#" class="btn btn-red" target="_blank">Learn More</a>
            </div>
            <div class="carousel-item active">
              <h3>Ipsum header</h3>
              <p>Ipsum content</p>
              <a href="#" class="btn btn-red" target="_blank">Learn More</a>
            </div>
          </div>
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselRotatingContent" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselRotatingContent" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselRotatingContent" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

错误原因 #

1. 异步加载时机不匹配：jQuery的.load()是异步操作，刷新页面时，同步执行的JS代码可能在rotating-content.html的DOM元素插入页面之前就运行了，此时document.getElementById('carouselRotatingContent')返回null，调用addEventListener必然报错。首次加载正常只是巧合（异步请求刚好先完成），刷新后浏览器缓存或执行顺序变化导致JS先执行。
2. 内嵌JS无效的原因：即使把JS放到rotating-content.html里，代码执行时Bootstrap的Carousel实例可能还未完成初始化，而且同样存在DOM元素虽加载但轮播组件未绑定事件的问题。
3. 轮播HTML语法错误：rotating-content.html中carouselRotatingContent下的所有carousel-item都加了active类，违反Bootstrap轮播规则——同一时间只能有一个carousel-item处于激活状态，这会导致轮播行为异常，也可能间接影响事件绑定。

解决方法 #

方法1：利用.load()回调确保DOM加载完成 #

将绑定事件的代码放入.load()的回调函数，确保只有当异步加载完成、DOM元素插入页面后才执行JS：

$('#rotating-content').load(`./snippets/shared/rotating-content.html`, function() {
    // 加载完成后再获取元素并绑定事件
    var carouselA = document.getElementById('carouselRotatingContent');
    var carouselB = document.getElementById('carouselRotatingImage');
    
    // 先确认元素存在再绑定事件
    if (carouselA && carouselB) {
        carouselA.addEventListener('slide.bs.carousel', function(e) {
            // 使用getOrCreateInstance确保实例存在
            var bsCarouselB = bootstrap.Carousel.getOrCreateInstance(carouselB);
            bsCarouselB.to(e.to);
        });
    }
});

方法2：修复rotating-content.html的轮播HTML错误 #

修改carouselRotatingContent下的carousel-item，只保留第一个的active类：

<div class="carousel-inner">
  <div class="carousel-item active">
    <h3>Ipsum header</h3>
    <p>Ipsum content</p>
    <a href="#" class="btn btn-red" target="_blank">Learn More</a>
  </div>
  <div class="carousel-item"> <!-- 去掉active -->
    <h3>Ipsum header</h3>
    <p>Ipsum content</p>
    <a href="#" class="btn btn-red" target="_blank">Learn More</a>
  </div>
  <div class="carousel-item"> <!-- 去掉active -->
    <h3>Ipsum header</h3>
    <p>Ipsum content</p>
    <a href="#" class="btn btn-red" target="_blank">Learn More</a>
  </div>
</div>

方法3：（可选）用jQuery事件委托替代直接绑定 #

如果担心动态加载元素的事件丢失，可将事件委托绑定到已存在的父元素上：

$('#rotating-content').on('slide.bs.carousel', '#carouselRotatingContent', function(e) {
    var carouselB = document.getElementById('carouselRotatingImage');
    if (carouselB) {
        var bsCarouselB = bootstrap.Carousel.getOrCreateInstance(carouselB);
        bsCarouselB.to(e.to);
    }
});

这种方式无需依赖.load()的回调，因为事件委托绑定在已存在的父元素上，动态添加的子元素触发事件时会冒泡到父元素执行处理函数。

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