Svelte中{@html}渲染字符串HTML时on:click不生效如何解决

Svelte的on:click这类框架指令是编译期静态解析处理的，不会在运行时生效。{@html}语法注入的内容是运行时直接插入DOM的原生HTML字符串，Svelte不会对这部分内容做任何框架层面的编译解析，你写在字符串里的on:click只会被浏览器当成无意义的普通HTML属性，根本不会绑定任何事件逻辑。

完全不需要手动拼接HTML字符串，直接用Svelte自带的模板语法循环渲染即可，指令会被正常编译生效：

{#each Array.from({ length: 3 }, (_, idx) => idx + 1) as i}
  <button
    class="inline-flex items-center border-t-2 px-4 pt-4 text-sm font-medium {i === $trialsPage
      ? 'cursor-pointer border-mpe-color1 text-mpe-color1'
      : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}"
    aria-current="page"
    on:click={() => managePages(i)}
  >
    {i}
  </button>
{/each}

如果你的业务场景确实无法用模板静态渲染，必须拼接HTML字符串注入，就不要尝试在字符串里写Svelte指令，改用原生事件委托的方式绑定逻辑：

<script>
  let htmlStr = '';
  // 拼接HTML时移除Svelte指令，用data属性存储需要的参数
  for (let i = 1; i <= 3; i++) {
    const activeCls = i === $trialsPage
      ? 'inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1'
      : 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700';
    htmlStr += `<button class="${activeCls}" aria-current="page" data-page="${i}">${i}</button>`;
  }

  // 在容器上做事件委托，统一处理按钮点击
  function handleContainerClick(e) {
    const targetBtn = e.target.closest('button[data-page]');
    if (!targetBtn) return;
    const page = Number(targetBtn.dataset.page);
    managePages(page);
  }
</script>

<div on:click={handleContainerClick}>
  {@html htmlStr}
</div>

注意：优先选择第一种模板循环的实现方式，代码更简洁、可维护性更高，也能享受到Svelte的编译优化；事件委托方案仅作为无法使用模板渲染时的兜底选择。

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