Javascript 我的代码向动态元素添加单击侦听器有什么问题？

我有一个应用程序，我应该得到一个动态文本，用一个特定的标记替换字符串的所有出现，然后向这个标记添加一个单击侦听器，这样我就可以对标记应用新的样式

我尝试使用Jquery，但它没有应用侦听器，这是我的组件，有什么想法吗

template:
<div class="text-wrapper" [innerHTML]="text"></div>


export class FinderPage implements OnInit{

  chosedLetter: string = 'i';
  text = 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?';

  constructor() {}

  ngOnInit(){
    let regex = new RegExp(this.chosedLetter, 'g');

    this.text = this.text.replace(regex, `<span class="chosen-letter">${this.chosedLetter}</span>`);

    setTimeout(() => { //desperate measure with settimeout... :/

      $( ".chosen-letter" ).click(function(event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        $( this ).toggleClass('marked');
        alert('aaa')
      });
    }, 100);
  }

}

模板：
导出类FinderPage实现OnInit{
chosedLetter:string='i'；
text=“所有人都会犯错误，但必须清楚地看到错误，因为它是一种赞美，是一种对人的尊重，是一种对发明者真实性的尊重，也是一种对建筑师的尊重，所以必须解释清楚。不，它是一种尊重，它是一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重，一种尊重这是一个新的时代。它是一个伟大的时代。它是一个伟大的时代。它是一个伟大的时代。它是一个伟大的时代。它是一个伟大的时代。它是一个伟大的时代这是一个在法律上具有法律效力的法律，是一个“不受法律约束”的法律；
构造函数（）{}
恩戈尼尼特（）{
设regex=newregexp（this.chosedLetter，'g'）；
this.text=this.text.replace（regex，${this.chosedLetter}`）；
setTimeout（（）=>{//setTimeout的测量…：/
$（“.selected letter”）。单击（函数（事件）{
event.stopPropagation（）；
事件。stopImmediatePropagation（）；
$（this.toggleClass（'marked'）；
警报（'aaa'）
});
}, 100);
}
}

看看这个。我想这就是你想做的

这段代码大致如下：

@Component({
  selector: "my-app",
  template: '<div class="text-wrapper" [innerHTML]="text"></div>',
})
export class AppComponent implements OnInit, AfterViewInit {
  chosedLetter: string = 'm'; // 'm' is easier to click than 'i'!
  text: string | SafeHtml = 'A very long string.';

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    const regex = new RegExp(this.chosedLetter, 'g');
    const span = `<span class="chosen-letter")">${this.chosedLetter}</span>`;
    const plainText = this.text as string;
    const newText = plainText.replace(regex, span);
    this.text = this.sanitizer.bypassSecurityTrustHtml(newText);
  }

  ngAfterViewInit() {
    const elements = this.elementRef.nativeElement.querySelectorAll('.chosen-letter');
    elements.forEach(element => {
      this.renderer.listen(element, 'click', event => {
        element.classList.toggle('marked');
        console.log('Clicked on ' + this.chosedLetter);
      });
    });
  }
}

@组件({
选择器：“我的应用程序”，
模板：“”，
})
导出类AppComponent实现OnInit，AfterViewInit{
chosedLetter:string='m'；//'m'比'i'更容易单击！
text:string | SafeHtml='一个很长的字符串'；
建造师(
private elementRef:elementRef，
私有渲染器：渲染器2，
私人消毒剂
) {}
恩戈尼尼特（）{
const regex=new RegExp（this.chosedLetter，'g'）；
const span=`您真的不应该在这里使用jQuery。