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

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

  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: ");
  }

单击按钮时，不会发生任何事情-除了：

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

---

其他按钮不会发生任何变化。我尝试过使用

click.delegate

，但这似乎也没有任何作用。

此.updateTree

不是函数，因为您的函数

updateTree

是在

窗口

对象的上下文中定义的，而

此

引用DOM元素。尝试在按钮

onclick

call中删除

this

---

onclick=updateTree（）

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

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

由于

updateTree

但是要小心，使用这种方法，您不会引用您的函数，而是将其复制到每个推送的标记。html中的onclick将如下所示：

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

这意味着您将无法使用viewmodel中驻留在该函数之外的任何代码。假设您在viewmodel中有一个变量，如

this.variable=“not undefined”

。当onclick操作触发时，它将是未定义的

---

我可能会尝试从aurelia框架导入TemplatingEngine，首先在变量中创建infowindow，然后使用TemplatingEngine对其进行增强。然后您应该能够使用

单击。委派
：

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
   });
  }

从'aurelia framework'导入{TemplatingEngine，inject}；
@注入（模板生成引擎）
导出类应用程序{
模板引擎：模板引擎；
构造器（te:TemplatingEngine）{
this.templatingEngine=te；
}
制备标记（）{
让infoWindowContent=document.createElement（'div'）；
infoWindowContent.id=“content”；
infoWindowContent.innerHTML=`
树${val[“TreeID”]}
说明：${val[“说明”]}

结果：${val[“结果”]}

更新
编辑信息
历史的
`;
enhance（{element:infoWindowContent，bindingContext:this}）；
这个，我的，推({
...
infoWindow:infoWindowContent
});
}

我假设您使用的是谷歌地图，据我所知，他们接受htmlelement和字符串作为“内容”：

旁注：如果你按下一个以上的标记，你将拥有多个相同id的元素（内容、旁注、首标题、正文）。你可能应该将所有id交换为类。
谢谢你的建议。尝试一下，但没有乐趣：
更新
输出
（索引）：1未捕获引用错误：在HtmlButtoneElement中未定义updateTree。单击
Hmm，您的语法很有趣。您不需要将
updateTree
定义为
function updateTree（）{…}
而不仅仅是
updateTree（）{…}
no，这是使用ES6的Aurelia框架。JS看起来像是在HTML或JS中的何处？你不能在Aurelia中声明类似的函数。这个声明需要在JS中声明。你尝试过吗？-想法是在创建HTML后附加事件侦听器。嗯，看起来很有希望-尝试了这个
更新
，但出现了一个错误：`（索引）：1未捕获的语法错误：意外标记（`我对Aurelia不确定。但在上面的Javascript中，我将如何将事件附加到动态创建的html中。或者可能使用jquery并将类或ID绑定到事件。尽管如此，这里有一个链接可能会有所帮助，但我不确定-我应该提到这个元素是谷歌地图上显示的一个点-这可能会影响某些东西-不是当然..另外，既然您说html呈现得很好，那么您可以获取元素并单独附加事件。类似于
var element=document.getElementById（'id'）；element.onclick=function（）{//handle click}；
不用说，每次呈现html时都必须执行此操作，因为id是uniq。
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
   });
  }