带同步字幕的音频阅读器：点击跳转按钮后按钮消失问题

你的判断没错，按钮消失确实和innerHTML操作直接相关——大概率是点击跳转后触发了字幕更新逻辑，而你在displaySubtitles里用innerHTML重新拼接了所有字幕内容，这会把之前已经绑定好点击事件的按钮节点全部销毁并重新创建，看起来就像按钮“消失”了（实际是被新的DOM节点替换，新节点可能未绑定事件）。

给你两个直接可行的解决办法：

方法1：使用事件委托（推荐） #

把点击事件绑定到字幕容器的父元素上，而不是每个按钮本身。这样哪怕innerHTML反复更新，父元素的事件监听不会失效，还能减少事件绑定的开销。

示例代码：

// 给容器绑定一次事件委托，仅需执行一次
document.getElementById('subtitles-container').addEventListener('click', function(e) {
  // 判断点击目标是字幕按钮
  if (e.target.classList.contains('time-button')) {
    const startTime = parseFloat(e.target.dataset.start);
    audioPlayer.currentTime = startTime;
  }
});

// 修改displaySubtitles函数，给按钮添加data属性和类名
function displaySubtitles(subtitles) {
  let htmlStr = '';
  subtitles.forEach(sub => {
    // 用data-start存储时间，替代自定义属性
    htmlStr += `<button class="time-button" data-start="${sub.start}">${sub.text}</button>`;
  });
  document.getElementById('subtitles-container').innerHTML = htmlStr;
}

方法2：初始化时一次性创建所有按钮，后续仅更新高亮样式 #

如果字幕内容不会动态变化，完全可以在页面初始化时就把所有按钮创建好并添加到容器，后续播放时只通过添加/移除CSS类来高亮对应句子，不再调用innerHTML重写容器内容。

示例代码：

// 初始化字幕按钮
function initSubtitles(subtitles) {
  const container = document.getElementById('subtitles-container');
  subtitles.forEach(sub => {
    const btn = document.createElement('button');
    btn.className = 'time-button';
    btn.dataset.start = sub.start;
    btn.textContent = sub.text;
    // 绑定点击事件
    btn.addEventListener('click', function() {
      audioPlayer.currentTime = parseFloat(this.dataset.start);
    });
    container.appendChild(btn);
  });
}

// 播放时仅更新高亮样式，不重写DOM
function highlightCurrentSubtitle(currentTime) {
  const allButtons = document.querySelectorAll('.time-button');
  allButtons.forEach((btn, index) => {
    const start = parseFloat(btn.dataset.start);
    // 根据你的字幕时间逻辑判断是否为当前字幕，需补充end时间判断
    const end = index < allButtons.length - 1 ? parseFloat(allButtons[index+1].dataset.start) : Infinity;
    btn.classList.toggle('highlight', start <= currentTime && currentTime < end);
  });
}

这样就彻底避免了innerHTML重写导致的DOM节点销毁问题，按钮只会被创建一次，不会出现消失的情况。

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