数组动态生成的div内部绑定的事件与方法无法识别触发如何解决？

报错截图 #

根因分析 #

• 手动绑定事件的执行时机错误：执行DOM查询绑定时，动态生成的元素还没挂载到页面，找不到对应元素导致绑定失败
• 事件回调参数错误：addEventListener第二个参数直接调用了目标函数，将返回值作为回调而不是函数本身，绑定瞬间就执行了函数，点击时无对应逻辑触发
• 作用域指向错误：map的回调使用普通function声明，内部this指向不再是组件实例，调用this._getFundSelected会直接报错
• 自定义组件事件透传问题：如果使用的是自定义button-icon组件，若内部没有透传原生click事件，外层绑定的@click会无法触发

修复方案 #

方案1：优先使用模板内绑定（推荐） #

先确认button-icon组件已正确注册且支持click事件透传，同时将map的回调改为箭头函数保证this指向正确：

${this.fundsData.map((g, index, array) => {
  if (g.nameRisk == "Conservador") {
    return html`
            <div class="panel-risk">
              <div class="risk-header">
                <div>
                  <list-header heading="${g.nameFund}" ></list-header>
                  <div class="risk-type">${g.nameRisk}</div>
                </div>
                <button-icon id="${g.idFund}" type="submit"
                @click="${(e) => {
                  e.preventDefault();
                  console.log("event");
                  this.dispatchEvent(new CustomEvent('cfon-riskprofile-selected', { bubbles: true, composed: true, detail: { fundId: g.idFund } }));
                }}"
                icon="${Continueright()}" variant="no-background">
                </button-icon>
              </div>
              <div class="risk-body">
                <panel-risk risk="${g.lvlRisk}" max-risk="8" max-in-view="8" label-index="1"
                  label="Riesgo: ${g.nameLvlRisk}" risk-text="">
                </panel-risk>
              </div>
              <div class="risk-body-description">
                Invierte desde <strong>$${g.minMoney}</strong> </br>
                Rentabilidad ${g.nameRent} de <strong>${g.rentability} E.A</strong>
              </div>
            </div>`;
  }
})}

如果button-icon不支持事件透传，可在外层套一层普通div，在div上绑定click事件即可。

方案2：手动绑定事件 #

必须保证代码在DOM完全挂载后执行（比如放在组件updated生命周期钩子中），同时修改绑定逻辑：

// 仅在动态渲染的DOM完全挂载到页面后执行以下代码
this.fundsData.map((g, index, array) => {
  const targetBtn = document.getElementById(g.idFund);
  if(targetBtn) {
    // 传入箭头函数作为回调，点击时才触发目标方法
    targetBtn.addEventListener("click", () => this._getFundSelected(g.idFund));
    console.log("AddEvent " + g.idFund);
  }
})

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