在仍未在 dom 中的元素上添加点击事件

发布于 2025-01-14 04:05:43 字数 699 浏览 5 评论 0原文

我必须在锚元素上添加单击事件，该元素可以稍后加载我知道在 javascript 中我可以这样做。

document.addEventListener('click', function(e){
    if(e.target && e.target.id== 'myDynamicallyAddedElementID'){
         //do something
    }
});

但我需要在有角度的打字稿中做，我正在尝试这样，

 document.addEventListener("click", function (e) {
        try {
        let id = e.target && (e.target as HTMLAnchorElement).id;
        console.log(id)
        if (id == 'lnkCheck') {
          alert('Hi');
        }
        } catch (error) {
          
        }
        

      })

但它不起作用，另外我如何检查目标是否是锚标记

有任何帮助，非常感谢，

更新

上面的代码唯一的问题是我点击了错误的地方

谢谢

原文

I have to add click event on a anchor element that can load later I know in javascript I can do like this.

document.addEventListener('click', function(e){
    if(e.target && e.target.id== 'myDynamicallyAddedElementID'){
         //do something
    }
});

But I need to do In Typescript in angular and I am trying like this,

 document.addEventListener("click", function (e) {
        try {
        let id = e.target && (e.target as HTMLAnchorElement).id;
        console.log(id)
        if (id == 'lnkCheck') {
          alert('Hi');
        }
        } catch (error) {
          
        }
        

      })

But its not working, also How can I check if the target is an anchor tag

any help, highly appreciated,

UPDATE

the above code is working only issue was I was clicking on wrong place

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

东风软 2025-01-21 04:05:43

如果您确定该元素将位于具有给定 id 的 DOM 中，那么可以借助组件中的 AfterViewInit 接口来实现此操作，如下所示。

  import { Component, OnInit, AfterViewInit } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
     
    })
    export class AppComponent implements OnInit, AfterViewInit {
  
      constructor() {}
    
      ngOnInit() {
      }
    
      ngAfterViewInit() {
        document.addEventListener('click', function (e) {
          try {
            let id = e.target && (e.target as HTMLAnchorElement).id;
            console.log(id);
            if (id == 'lnkCheck') {
              alert('Hi');
            }
          } catch (error) {}
        });
      }
    }

If you are sure that element will be in the DOM with given id then this thing can be implemented with the help of AfterViewInit interface in the component something like this.

  import { Component, OnInit, AfterViewInit } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
     
    })
    export class AppComponent implements OnInit, AfterViewInit {
  
      constructor() {}
    
      ngOnInit() {
      }
    
      ngAfterViewInit() {
        document.addEventListener('click', function (e) {
          try {
            let id = e.target && (e.target as HTMLAnchorElement).id;
            console.log(id);
            if (id == 'lnkCheck') {
              alert('Hi');
            }
          } catch (error) {}
        });
      }
    }

回复收藏 0 原文

客…行舟 2025-01-21 04:05:43

document.addEventListener("click", function (e) {
    const target = e.target;
    if (target instanceof HTMLElement) {
        if (target.tagName === 'A' && target.id === 'lnkCheck') {
            alert('Hi');
        }
    }
})

这是你想要的吗？

document.addEventListener("click", function (e) {
    const target = e.target;
    if (target instanceof HTMLElement) {
        if (target.tagName === 'A' && target.id === 'lnkCheck') {
            alert('Hi');
        }
    }
})

Is this what you want?

回复收藏 0 原文

~没有更多了~