событие click не запускается для динамически генерируемых элементов

Question

HTML-код, который динамически добавляется в DOM из.

  <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)="Onclick(abc)"

Теперь я добавляю это динамически.Итак, событие нажатия не работает.

Я много искал, но не смог найти решение.Мой машинописный код ниже.

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);
}

Я получаю эту ошибку.

ERROR TypeError: Cannot read property 'addEventListener' of null

Но событие щелчка не срабатывает.Я пробовал даже с SetTimeOut() функцией с 3-секундным интервалом.

РЕДАКТИРОВАТЬ: -

Я проверяю с этим,

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

Answer 1

Вместо этого попробуйте эту строку, а также проверьте, чтобы убедиться, что только один элемент с этим классом:

this.elementRef.nativeElement.querySelector("[class='click_for_save']")
                                .addEventListener('click', this.click_for_save.bind(this));

Также попробуйте это, чтобы увидеть, если существует более одного элемента с таким же классом:

var button = document.querySelector("[class='click_for_save']");
console.log(button);

Проверьте, есть ли в нем какие-либо элементы.

ОБНОВЛЕНИЕ:

Попробуйте это

$("body").on("click", ".click_for_save", function(){
  //do something
});