动态创建的元素上的 addEventListener 不起作用答案

【问题标题】：addEventListener on dynamically created elements not working动态创建的元素上的 addEventListener 不起作用
【发布时间】：2019-06-15 13:24:12
【问题描述】：

我想将点击事件添加到内部 html 中的图像。但是当我尝试添加它时，它不起作用。

模板

<div [innerHTML]="myHtml"></div>

代码

我的Html;

ngOnInit() {
    const root = document.createElement('div');
    root.innerHTML = this.getHtml();
    const images = root.getElementsByTagName('img');
    Array.prototype.forEach.call(images, (image: HTMLImageElement, i) => {
      image.addEventListener('click', (event: any) => {
        console.log('click', event);
      });
    });
    this.myHtml = root.innerHTML;
  }

这里是stackblitz

【问题讨论】：

@Suhel Khan 如果你想选择并添加所有事件监听器 <img> 你可以查看我的答案

标签： javascript html angular typescript

【解决方案1】：

您需要使用 ngAfterViewInit() 来实现这一点，我已经修改了代码并且工作正常。

请检查链接 https://stackblitz.com/edit/angular-7da7cd

希望这会有所帮助。

【讨论】：

【解决方案2】：

这可能是由于限制事件监听器只能在页面循环开始之前为元素注册。您是否尝试过 Renderer2 以更角度的方式进行操作

this.renderer.listen('img', 'click', (evt) => {
  console.log('Clicking the document', evt);
});

文档：https://angular.io/api/core/Renderer2

【讨论】：

谢谢，这也是可行的，但不是 'img' 目标好发送所需元素的 nativeElement

【解决方案3】：

它还没有在 DOM 中。对ngAfterViewInit做同样的事情：

ngAfterViewInit() {
    const root = document.createElement('div');
    root.innerHTML = this.getHtml();
    const images = root.getElementsByTagName('img');
    Array.prototype.forEach.call(images, (image: HTMLImageElement, i) => {
      image.addEventListener('click', (event: any) => {
        console.log('click', event);
      });
    });
    this.myHtml = root.innerHTML;
  }

【讨论】：

【解决方案4】：

您可以使用elementRef 指定<img> 元素。然后您可以使用以下内容将事件侦听器添加到所有<img>：

ngAfterViewInit() {
    var elem = this.elementRef.nativeElement.querySelectorAll('img');
    if (elem) {
      elem.forEach(res => {
        res.addEventListener('click', this.onclick.bind(this));
      })
    }
}

注意：

onclick() {
    alert("Image clicked");
}

是您可以自定义的自定义函数。别忘了import { ElementRef } from '@angular/core';

Stackblitz Fork.

更多细节进入AfterViewInit，.bind，ElementRef and Renderer的区别

【讨论】：