jQuery.on()事件委托实现动态Quill编辑器富文本/Markdown切换问题

问题核心原因 #

原代码的事件绑定仅作用于页面初始加载时已存在的DOM节点，动态生成的回复编辑器无法绑定事件；同时全局选择器会导致多个编辑器实例操作互相干扰。

解决方案 #

1. 可选优化：HTML结构增加标识（推荐） #

给两个切换按钮增加data-target属性，不依赖文本或DOM层级判断，兼容性更强：

<!-- 富文本面板内的切换按钮 -->
<a class="d-inline-flex justify-content-center mt-2 mb-2 ms-auto toggle" data-target="markdown">Markdown</a>

<!-- Markdown面板内的切换按钮 -->
<a class="d-inline-flex align-items-center toggle" data-target="rich">Rich Text</a>

2. 替换原有切换JS逻辑 #

删除原有的两段点击事件绑定代码，替换为统一的事件委托逻辑：

// 统一绑定所有编辑器切换事件，适配动态加载的回复编辑器
$('#comments').on('click', '.toggle', function() {
  // 定位当前点击按钮所属的编辑器容器，仅操作当前实例，避免多实例干扰
  const $currentEditor = $(this).closest('.editor');
  // 移除当前编辑器内所有面板的激活状态
  const $allPanels = $currentEditor.children('div').removeClass('animated active');
  // 根据目标切换对应面板
  if ($(this).data('target') === 'markdown') {
    $allPanels.filter('.fadeInRight').addClass('animated active');
  } else {
    $allPanels.filter('.fadeInLeft').addClass('animated active');
  }
});

如果不想修改HTML结构，也可以直接用按钮文本判断，替换判断逻辑即可：

if ($(this).text().trim() === 'Markdown') {
  $allPanels.eq(1).addClass('animated active');
} else {
  $allPanels.eq(0).addClass('animated active');
}

3. Quill实例化适配 #

动态复制编辑器DOM后，需要单独给新生成的编辑器实例化Quill，避免和初始编辑器共用实例：

// 封装Quill初始化方法
function initQuill($editor) {
  return new Quill(
    $editor.find('.rich')[0],
    {
      modules: {
        toolbar: {
          container: $editor.find('.toolbar')[0]
        }
      },
      placeholder: '',
      theme: 'snow'
    }
  );
}

// 每次生成新的回复编辑器后调用，$newEditor为新复制的.editor节点的jQuery对象
const newQuillInstance = initQuill($newEditor);

逻辑优势 #

• 仅绑定一次事件，不需要每次新增编辑器重复绑定，性能更优
• 完全适配动态生成的DOM节点，不需要修改AJAX加载逻辑
• 基于编辑器容器隔离操作，多个回复编辑器的切换互不影响
• 逻辑简洁，后期修改HTML结构不需要大面积调整JS代码

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