javascript - 如何在内联定义的 HTML 中调用 onclick

Question

我有以下代码来显示一个包含三个按钮的对话框。我正在尝试根据单击的按钮执行特定功能。但是到目前为止，我还没有成功执行函数:

  this.myMarkers.push({
    latitude: val["Latitude"],
    longitude: val["Longitude"],
    title: 'Tree ' + val["TreeID"],
    custom: {id: 123456},
    infoWindow: {content: `
            <div id="content">
              <div id="siteNotice"></div>
              <h1 id="firstHeading" class="firstHeading">Tree ${val["TreeID"]}</h1>
              <div id="bodyContent">
                <p>Description: ${val["Description"]}</p>
                <p>Fruit Bearing: ${val["FruitBearing"]}</p>
                <button type="button" onclick="this.updateTree()">Update</button>
                <button type="button" onclick=${this.editTreeInfo()}>Edit Info</button>
                <button type="button" onclick="${this.showTreeHistory()}">Historical</button>
              </div>
            </div>`}
  });

  updateTree(){
    console.log("Update Tree: ");
  }

  editTreeInfo(){
    console.log("Edit Tree: ");
  }

  showTreeHistory(){
    console.log("Show Tree History: ");
  }

在控制台中，页面加载后，输出如下:

welcome.js:56 Edit Tree: 
welcome.js:60 Show Tree History: 
welcome.js:56 Edit Tree: 
welcome.js:60 Show Tree History: 
welcome.js:56 Edit Tree: 
welcome.js:60 Show Tree History: 
welcome.js:56 Edit Tree: 
...

当点击按钮时，没有任何反应 - 除了:

Uncaught TypeError: this.updateTree is not a function
    at HTMLButtonElement.onclick ((index):1)

其他按钮没有任何反应。我试过使用 click.delegate 但这似乎也没有做任何事情。

Answer 1

我真的不认为这是解决问题的方法，但快速解决方法可能是像这样编写您的 onclick 函数:

onclick='(${this.updateTree})()'

由于 updateTree 之后的括号，您当前的代码立即执行

请注意，使用此方法您不会引用您的函数，而是将其复制到每个推送的标记。 html 中的 onclick 看起来像这样:

onclick="(function () {
        // ALL CODE from inside updateTree function
    })()"

这意味着您将无法使用位于该函数之外的 View 模型中的任何代码。假设您在 View 模型中有一个变量，例如 this.variable = "not undefined"。当 onclick Action 触发时，这将是未定义的。

---

我可能会尝试从 aurelia-framework 导入 TemplatingEngine，首先在变量中创建信息窗口，然后使用模板引擎对其进行增强。那么你应该可以使用click.delegate:

import { TemplatingEngine, inject } from 'aurelia-framework';

@inject(TemplatingEngine)
export class App {
  templatingEngine: TemplatingEngine;

  constructor(te: TemplatingEngine) {
    this.templatingEngine = te;
  }

prepareMarker(){
 let infoWindowContent = document.createElement('div');
 infoWindowContent.id = "content";
 infoWindowContent.innerHTML = `<div id="siteNotice"></div>
          <h1 id="firstHeading" class="firstHeading">Tree ${val["TreeID"]}</h1>
          <div id="bodyContent">
            <p>Description: ${val["Description"]}</p>
            <p>Fruit Bearing: ${val["FruitBearing"]}</p>
            <button type="button" click.delegate="updateTree()">Update</button>
            <button type="button" click.delegate="editTreeInfo()">Edit Info</button>
            <button type="button" click.delegate="showTreeHistory()">Historical</button>
          </div>`;
   this.templatingEngine.enhance({ element: infoWindowContent, bindingContext: this });

   this.myMarkers.push({
    ...
    infoWindow: infoWindowContent
   });
  }

我假设您使用的是谷歌地图，据我所知，它们接受一个 html 元素以及一个字符串作为“内容”:Link

旁注:如果你按下超过 1 个标记，你将有多个相同 id 的元素(content、sideNotice、firstHeading、bodyContent)。您可能应该将所有 ID 换成类。