首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >click事件不会在动态生成的元素上触发

click事件不会在动态生成的元素上触发
EN

Stack Overflow用户
提问于 2018-06-04 22:30:43
回答 1查看 248关注 0票数 0

动态添加到DOM上的代码。

代码语言:javascript
复制
  <ul>    
        <li>        
            <button (click)="Onclick(abc)" class="btn btn-sm btn-danger  click_for_save pull-right" type="button">
            <i class="fa fa-close"></i> Save </button>
        </li>                   
    </ul>

在HTML代码中,有一个带有参数的click事件。(click)="Onclick(abc)"

现在我正在动态地添加它。因此,click事件不起作用。

我已经搜索了很多,但还是找不到解决方案。我的打字代码如下。

代码语言:javascript
复制
import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}

 // Below code I have added just after the dynamically added code.

  this.elementRef.nativeElement.querySelector('.click_for_save')
                                .addEventListener('click', this.click_for_save.bind(this)); 

Onclick(abc) {
  console.log(abc);
}

我得到了这个错误。

代码语言:javascript
复制
ERROR TypeError: Cannot read property 'addEventListener' of null

但是click事件没有触发。我甚至尝试过3秒间隔的SetTimeOut()函数。

编辑:-

我正在检查这个,

代码语言:javascript
复制
let query_selector_value =  this.elementRef.nativeElement.querySelector('.click_for_save');
if(query_selector_value){
  query_selector_value.addEventListener('click', this.click_for_save.bind(this));
}

我要让query_selector_value - null

EN

回答 1

Stack Overflow用户

发布于 2018-06-04 22:41:35

尝试下面这一行,同时检查以确保这个类只有一个元素:

代码语言:javascript
复制
this.elementRef.nativeElement.querySelector("[class='click_for_save']")
                                .addEventListener('click', this.click_for_save.bind(this));

还可以尝试查看是否有多个元素具有相同的类:

代码语言:javascript
复制
var button = document.querySelector("[class='click_for_save']");
console.log(button);

看看它是否有任何元素。

更新:

试试这个

代码语言:javascript
复制
$("body").on("click", ".click_for_save", function(){
  //do something
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50682936

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档