将 onclick 附加到从 API 收到的 HTML

Question

我有一个页面接收 HTML-来自 API 的内容。

在该代码中有带有 class "openMap" 的 DIV。当用户单击这些 DIV 时，我希望执行一个函数（下面示例中的 alert('yes')）。

我尝试了以下方法，但是

console.log(elementsWithClass[i]);

确实输出每个元素的HTML，我不能添加点击事件。

如何实现？当前代码：

this.http.get(httpGetUrl)
        .subscribe(data => {
            let returnedHtml = data['_body'];
            if(returnedHtml != ''){
                this.notdienstHtml = returnedHtml;
                this.zone.run(() => {
                    let elementsWithClass = document.getElementsByClassName("openMap");
                    setTimeout(function(){
                        console.log(elementsWithClass.length);
                        for (let i=0; i < elementsWithClass.length; i++) {
                            console.log(elementsWithClass[i]); //correctly outputs HTML-content of each DIV it iterates over
                            elementsWithClass[i].onclick = function(){
                                //not run when DIV is clicked
                                alert('yes');
                            }
                        };
                    }, 300);
                });
            }
        });

Answer 1

尝试从将呈现响应的组件绑定事件。

import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  this.elementRef.nativeElement.querySelector('my-element')
                                .addEventListener('click', this.onClick.bind(this));
}

onClick(event) {
  console.log(event);
}

Answer 2

这就是我的结局。重要的是，如果内容是动态的，请通过 ts 文件中的 element.innerHtml 更新它，而不是 html 文件中的 [innerHtml]。

在HTML

<div #mainHtml id="mainHtml"></div>

在构造函数之前：

@ViewChild('mainHtml') mainHtml: ElementRef;

功能：

this.http.get(httpGetUrl)
        .subscribe(data => {
            let returnedHtml = data['_body'];
            if(returnedHtml != ''){
                let nativEl = this.mainHtml.nativeElement;
                nativEl.innerHTML = returnedHtml; //update the HTML
                let elements = nativEl.querySelectorAll('.openMap'); //openMap is the css selector
                for(let element of elements){
                    element.addEventListener('click', this.openMap.bind(this)); //openMap is the function name
                }
            }
        });

将 onclick 附加到从 API 收到的 HTML

Attach onclick to HTML received from API

onclick

dynamic-content

ionic3

angular