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

Posted 2023-02-21

【中文标题】如何在 Javascript 类的内部 HTML 中运行 onClick 函数？

【英文标题】：How to run a onClick function inside inner HTML in Class Javascript?

【发布时间】：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`);
  

【参考方案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> `;