如何解决模态内的元素不响应单击事件
我的角度应用程序中有一个模态,但是模态中的元素没有响应点击事件
模板
<div class='modal_wrapper centered top'>
<div class ="row">
<div class ="col-lg-11 col-md-11 col-sm-11 col-xs-11"></div>
<div class ="red link right fs22 col-lg-1 col-md-1 col-sm-1 col-xs-1" title ="Close Modal" (click) ="closeModal();">X</div>
</div>
<div id ="modal_content" class='modal_content' style ="background: yellow;">
content
</div>
</div>
<p class ="test hide">
<span (click)="hi();" style ="background: blue;">click me</span>
</p>
<br />
<a (click)="doToggle('.test');" class='button glyphicon glyphicon-plus'>Click to toggle2</a>
这是TS课
export class AppComponent {
constructor(private element: ElementRef){}
doToggle(contentSelector){
const modalTarget: HTMLElement = this.element.nativeElement.querySelector('.modal_wrapper');
document.querySelector('.modal_wrapper .modal_content').innerHTML = document.querySelector(contentSelector).innerHTML
modalTarget.classList.toggle('active');
}
hi(){
alert('hi')
}
}
当我单击模式内的元素时,我希望看到一个警报,但它不起作用。谁能帮我解决我需要做的事情。下面是输出模式
这里是在stackbliz https://angular-ivy-h6wmdb.stackblitz.io
上尝试使用的链接版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。