0

我正在尝试将click事件侦听器添加到div页面加载后动态生成的事件侦听器，但我似乎无法让事件注册。我正在按照此答案中的说明进行操作，但是它对我不起作用。

在我的ngOnInit()我有一个combineLatest()：

combineLatest([this.params$, this.user$]).subscribe(([params, user]: [Params, User]) => {   
    this.artistId = parseInt(params['artist']);   
    this.user = user;

  if (this.artistId) {
    this.artistProfileGQL.watch({
      id: this.artistId
    }).valueChanges.subscribe((response: ApolloQueryResult<ArtistProfileQuery>) => {
      this.artist = response.data.artist;
      this.initElements(); // WHERE I CALL TO INITIALIZE DYNAMIC DOM ELEMENTS
    }); 
})

在这个块中，我调用initElements()which 是我创建某些DOM元素的地方。我在下面包括了其中的大部分。本质上，我有一个 header 元素，在这个 header 元素中，我创建了一个followBtn，看起来像这样（为简洁起见，我从代码中删除了标题、关注者、元素等）。我为最相关的行添加了大写注释：

在此处输入图像描述 

initElements() {
  const parentElement = this.el.nativeElement;
  this.header = parentElement.querySelector('ion-header');

  // Create image overlay
  this.imageOverlay = this.renderer.createElement('div');
  this.renderer.addClass(this.imageOverlay, 'image-overlay');

  this.colorOverlay = this.renderer.createElement('div');
  this.renderer.addClass(this.colorOverlay, 'color-overlay');

  this.colorOverlay.appendChild(this.imageOverlay);
  this.header.appendChild(this.colorOverlay);

  var artistHeader = this.renderer.createElement('div');
  this.renderer.addClass(artistHeader, 'artist-header');

  // HERES WHERE I CREATE MY BUTTON ELEMENT
  this.followBtn = this.renderer.createElement('div');
  this.renderer.addClass(this.followBtn, "follow-btn");
  var followText = this.renderer.createText('FOLLOW');
  this.renderer.appendChild(this.followBtn, followText);

  this.renderer.appendChild(artistHeader, this.followBtn);

  this.renderer.appendChild(this.imageOverlay, artistHeader);

  // HERES WHERE I CREATE MY LISTENER
  this.followButtonListener = this.renderer.listen(this.followBtn, 'click', (event) => {
    console.log(event);
  });

}

但是，当我单击该元素时，我的控制台上没有打印任何内容。如果我将 的 更改target为listener元素DOM，则单击侦听器将起作用。我究竟做错了什么？

4

0 回答 0