如何在 Javascript 类的内部 HTML 中运行 onClick 函数？答案

【问题标题】：How to run a onClick function inside inner HTML in Class Javascript?如何在 Javascript 类的内部 HTML 中运行 onClick 函数？
【发布时间】：2022-01-22 14:54:38
【问题描述】：

我在使用 Class Javascript 时遇到问题。所以我想传递循环的项目ID。如何使用handleProject 函数执行 onClick？测试我使用alert。以下代码产生“输入意外结束”错误

import axios from "axios";

export class ProjectPanel extends DockingPanel {
  constructor(viewer, container, id, title, options, projects) {
    super(container, id, title, options);
    this.viewer = viewer;
    this.options = options;
    // docking panel
    this.container.classList.add("docking-panel-container-solid-color-a");
    this.container.style.cssText = `
          top: 10px;
          left: 10px;
          width: 300px;
          padding: 10px;
          min-height: 300px;
          resize: auto;
        `;
    this.projects = projects;
    if (this.projects) {
      this.updateProjectList(this.projects);
    }
  }

  updateProjectList(projects) {
    console.log(projects);
    this.containerProject = document.createElement("div");
    this.containerProject.className = "containerProject";
    this.container.append(this.containerProject);
    if (projects) {
      this.containerProject.innerHTML =
        "<div >" +
        projects
          .map((project) => {
            return (
              `<div class='button-bee-project glyphicon glyphicon-triangle-right' onclick=${this.handleProject(project.id)}>` +
              project.name +
              "</div>"
            );
          })
          .join("") +
        "</div>";
    } else {
      this.containerProject.innerHTML = `
         <div>Please Login</div>
          `;
    }
  }

  handleProject(id) {
    alert(`HELLO ${id}`);
  }
}

【问题讨论】：

标签： javascript dom

【解决方案1】：

一个简单的解决方案可能是更改您的结构以将project 附加到containerProject，而不是通过字符串设置containerProject 的innerHTML，您可以创建DOM 元素，设置元素的onclick，然后将其附加到containerProject，如下例所示：

updateProjectList(projects) {
  this.containerProject = document.createElement("div");
  this.containerProject.className = "containerProject";
  this.container.append(this.containerProject);
  if (projects) {
    this.containerProject.innerHTML = '<div></div>';
    const projects = this.containerProject.firstElementChild;
    projects.forEach((project) => {
        const projectEl = document.createElement('div');
        projectEl.innerHTML = project.name;
        projectEl.className = 'button-bee-project glyphicon glyphicon-triangle-right';
        projectEl.onclick = ()=> this.handleProject(project.id);
        projects.append(projectEl);
      });
} else {
  this.containerProject.innerHTML = `
     <div>Please Login</div> `;
  }
}

【讨论】：