lit-html 动态菜单点击渲染后无法返回主菜单问题求助

安全阿岳

2026-9-28

问题原因

选择器使用错误：返回按钮的属性是class="backToSup"，但代码中用了ID选择器$("#backToSup")，无法匹配到对应元素
动态元素事件绑定失效：返回按钮是点击子菜单后才渲染到页面的，$(document).ready()执行时该元素还不存在，直接绑定的点击事件不会生效

修复方案

把原有的返回按钮绑定逻辑替换为事件委托写法，绑定到页面初始就存在的父级元素上，同时修正选择器：

// 原有错误写法
// $("#backToSup").on("click", function(){
//   render(flapSupport(), document.getElementById("supportFlap"));
// })

// 替换为下面的事件委托写法
$(document).on("click", ".backToSup", function(){
  render(flapSupport(), document.getElementById("supportFlap"));
})

优化建议

如果要更贴合lit-html的使用逻辑，可以直接在模板里绑定事件，不需要依赖jQuery，写法更简洁，也不会出现动态元素事件绑定失效的问题：

// 定义返回主菜单的方法
const backToMain = () => {
  render(flapSupport(), document.getElementById("supportFlap"));
}

// 子菜单模板直接绑定事件
const flapContactSupport = () => html`
<button type="button" class="backToSup" name="button" @click=${backToMain}>Back</button>
{% include 'flap-contact-support.html' %}
`;

const flapFaq = () => html`
<button type="button" class="backToSup" name="button" @click=${backToMain}>Back</button>
{% include 'flap-faq.html' %}
`;

其他实现动态菜单的可选思路：