为何第二次点击后Event Listener消失？如何修复该问题

给你几个靠谱的修复方案，按需选择就行：

1. 用事件委托（最推荐） #

核心思路是利用事件冒泡，把点击事件绑定到不会被替换的父元素上（比如.preferenceFilter-container本身，或者更上层的稳定DOM节点），这样哪怕子元素被html()替换掉，父元素的监听器还在，点击新生成的子元素时事件会冒泡到父元素触发处理逻辑。

代码示例：

// 绑定到不会被替换的父容器上，监听子元素的点击
$('.preferenceFilter-container').on('click', '.preferenceFilter-answers-wrapper-item', function() {
  i++;
  if (i < levels.length) {
    $('.preferenceFilter-container').html(/* 这里放你要更新的DOM内容 */);
  }
});

2. 替换DOM后重新绑定事件 #

每次用html()更新完内容后，手动给新生成的.preferenceFilter-answers-wrapper-item重新绑定点击事件。这种方法需要把处理函数抽出来复用：

代码示例：

// 先把点击逻辑写成独立函数
function onItemClick() {
  i++;
  if (i < levels.length) {
    $('.preferenceFilter-container').html(/* 新的DOM内容 */);
    // 更新完DOM后，重新给新元素绑定事件
    $('.preferenceFilter-answers-wrapper-item').on('click', onItemClick);
  }
}

// 页面初始化时绑定第一次事件
$('.preferenceFilter-answers-wrapper-item').on('click', onItemClick);

3. 缩小DOM替换范围 #

如果页面结构允许，别直接替换整个.preferenceFilter-container，只更新里面需要变化的部分（比如选项列表的区域），这样原有的事件监听器所在的元素没被替换，自然不会失效。

比如原来的代码是替换整个容器，改成只替换选项容器：

i++;
if (i < levels.length) {
  // 只更新选项区域，保留外层容器和其他不变的元素
  $('.preferenceFilter-answers-wrapper').html(/* 新的选项内容 */);
}

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