Ionic framework 传单-如何将点击事件添加到ionic应用程序中标记弹出窗口内的按钮？

我正在尝试在我的ionic应用程序的弹出窗口中向按钮添加单击侦听器

在这里，我正在创建地图和显示标记，单击标题标记时要调用的方法也如下所示：

 makeCapitalMarkers(map: L.map): void {
    let eventHandlerAssigned = false;

    this.http.get(this.capitals).subscribe((res: any) => {
      for (const c of res.features) {
        const lat = c.geometry.coordinates[0];
        const lon = c.geometry.coordinates[1];
        let marker = L.marker([lon, lat]).bindPopup(`
        <h4 class="link">Click me!</h4>
        `);
        marker.addTo(map);
      }
    });

    map.on('popupopen', function () {
      console.log('Popup Open')
      if (!eventHandlerAssigned && document.querySelector('.link')) {
        console.log('Inside if')        
        const link = document.querySelector('.link')
        link.addEventListener('click', this.buttonClicked())
        eventHandlerAssigned = true
      }
    })
  }

 buttonClicked(event) {
    console.log('EXECUTED');
  }

makeCapitalMarkers（map:L.map）：无效{
设eventHandlerAssigned=false；
this.http.get（this.capitals）.subscribe（（res:any）=>{
用于（分辨率特性常数c）{
常数lat=c.几何坐标[0]；
常数lon=c.几何坐标[1]；
设标记=L.标记（[lon，lat]）.bindPopup(`
点击我！
`);
marker.addTo（map）；
}
});
map.on（'popupopen'，函数（）{
console.log（'弹出窗口打开'）
如果（！eventHandlerAssigned&&document.querySelector（'.link'））{
console.log（'insideif'）
const link=document.querySelector（“.link”）
link.addEventListener（'click'，this.buttonClicked（））
eventHandlerAssigned=true
}
})
}
按钮点击（事件）{
console.log（'EXECUTED'）；
}

单击此标题时，在控制台中打印if时弹出Open&Inside，因此我知道我进入了if语句，但由于某种原因，buttonClicked（）函数没有执行

有人能告诉我为什么这是当前的行为吗？

是的，你不能仅仅通过添加静态HTML来进行（单击）事件绑定。实现所需功能的一种方法是在添加此新dom元素后添加侦听器，请参见下面的伪代码：

makeCapitalMarkers(map: L.map): void {
    marker.bindPopup(this.popUpService.makeCapitalPopup(c));
    marker.addTo(map);
    addListener();
}

makeCapitalPopup(data: any): string {
    return `` +
        `<div>Name: John</div>` +
        `<div>Address: 5 ....</div>` +
        `<br/><button id="myButton" type="button" class="btn btn-primary" >Click me!</button>`
}

addListener() {
    document.getElementById('myButton').addEventListener('click', onClickMethod
}

makeCapitalMarkers（map:L.map）：无效{
marker.bindPopup（this.popUpService.makecapitalopup（c））；
marker.addTo（map）；
addListener（）；
}
makeCapitalPopup（数据：任意）：字符串{
返回`+
`姓名：约翰+
`地址：5+
`
点击我`
}
addListener（）{
document.getElementById（'myButton'）。addEventListener（'click'，OnClick方法
}

理想情况下，对于Angular，我们不应该直接使用DOM，所以如果上述方法有效，您可以通过渲染器重构添加事件侦听器

另外，我不熟悉传单库-但是对于上述方法，您需要考虑任何异步方法（如果有的话），这样您只有在成功将此类DOM元素添加到DOM中后才调用getElementById。

所以您不能这样做（单击）只需添加静态HTML即可进行事件绑定。实现所需的一种方法是在添加此新dom元素后添加侦听器，请参见下面的伪代码：

makeCapitalMarkers(map: L.map): void {
    marker.bindPopup(this.popUpService.makeCapitalPopup(c));
    marker.addTo(map);
    addListener();
}

makeCapitalPopup(data: any): string {
    return `` +
        `<div>Name: John</div>` +
        `<div>Address: 5 ....</div>` +
        `<br/><button id="myButton" type="button" class="btn btn-primary" >Click me!</button>`
}

addListener() {
    document.getElementById('myButton').addEventListener('click', onClickMethod
}

makeCapitalMarkers（map:L.map）：无效{
marker.bindPopup（this.popUpService.makecapitalopup（c））；
marker.addTo（map）；
addListener（）；
}
makeCapitalPopup（数据：任意）：字符串{
返回`+
`姓名：约翰+
`地址：5+
`
点击我`
}
addListener（）{
document.getElementById（'myButton'）。addEventListener（'click'，OnClick方法
}

理想情况下，对于Angular，我们不应该直接使用DOM，所以如果上述方法有效，您可以通过渲染器重构添加事件侦听器

---

另外，我不熟悉传单库-但是对于上述方法，您需要考虑任何异步方法（如果有的话），因此，只有在成功将此类DOM元素添加到DOM中后，您才调用getElementById。

我在2小时前遇到了这个问题。我不熟悉ionic，但希望这会有所帮助

创建一个变量，用于跟踪弹出窗口的内容是否已经附加了事件处理程序。然后，您可以向映射添加事件侦听器，以侦听要使用

map.on（'popupopen'，function（）{}打开的弹出窗口

。当这种情况发生时，弹出窗口中的DOM内容被呈现，并可用

querySelector

或

getElementById

抓取。因此，您可以将其作为目标，并向其添加事件侦听器。您还必须为

map.on（'popupclose'，（）=>{}）创建一个事件

，并在其中，从已附加事件侦听器的dom节点中删除该事件侦听器

您需要为创建的每个独特弹出窗口执行此操作，您要将事件侦听器添加到其中的内容。但是，也许您可以构建一个函数来为您执行此操作。以下是一个示例：

const someMarker=L.marker（map.getCenter（））.bindPopup(`
去挪威！
`)
someMarker.addTo（映射）
函数flyToNorway（）{
飞行地图([
47.57652571374621,
-27.333984375
]，3，{动画：真，持续时间：5}）
someMarker.closePopup（）
}
让eventHandlerAssigned=false
on（'popupopen'，function（））{
如果（！eventHandlerAssigned&&document.querySelector（'.norwayLink'））{
const link=document.querySelector（“.norwayLink”）
link.addEventListener（'click'，flyToNorway）
eventHandlerAssigned=true
}
})
on（'popupclose'，function（）{
document.querySelector（'.norwayLink'）。removeEventListener（'click'，flyToNorway）
eventHandlerAssigned=false
})

---

这就是我如何定位弹出内容并在中添加链接的方式。

我2小时前刚刚遇到这个问题。我不熟悉ionic，但希望这会有所帮助

创建一个变量，用于跟踪弹出窗口的内容是否已经附加了事件处理程序。然后，您可以向映射添加事件侦听器，以侦听要使用

map.on（'popupopen'，function（）{}打开的弹出窗口

。当这种情况发生时，弹出窗口中的DOM内容被呈现，并可用

querySelector

或

getElementById

抓取。因此，您可以将其作为目标，并向其添加事件侦听器。您还必须为

map.on（'popupclose'，（）=>{}）创建一个事件

，并在其中，从已附加事件侦听器的dom节点中删除该事件侦听器

您需要为您创建的每个唯一弹出窗口执行此操作，您要将事件侦听器添加到其中的内容