click event is not firing on dynamically generated elements

Question

HTML Code which is dynamically added on DOM from.

  <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>

Here in HTML code there is a click event with parameters. (click)="Onclick(abc)"

Now I'm addind it dynamically. So, click event is not working.

I have search a lot for it but not able to find the solution for it. My typescript code is below.

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

I'm getting this error.

ERROR TypeError: Cannot read property 'addEventListener' of null

But click event is not firing. I have tried even with SetTimeOut() function with 3 second gap.

EDIT :-

I'm checking with this,

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

And I'm getting query_selector_value - null

@Mamun. this question you suggested is jquery's question and my tag is Angular-5. So, is it same for both ? — WebRence, Jun 04 '18 at 14:34
The code you pasted here is very confusing. Could you provide [mcve] please — Vega, Jun 04 '18 at 14:40
You should google about event delegation. There are a lot of SO questions about it too- https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Andrew Lohr, Jun 04 '18 at 14:43
@AndrewLohr. Thank you for your reply. Yeah I know how event delegation works in jquery. But In angular-5 it's not invoking click event. I have refer this question also :- https://stackoverflow.com/questions/38053067/click-event-not-working-from-dynamically-generated-html-angular-2 — WebRence, Jun 04 '18 at 14:46

IamCavic · Answer 1 · 2018-06-04T19:18:59.403

0

Try this line instead, also inspect to make sure there is only one element with this class:

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

Also try this to see if there is more than one element with same class:

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

See if it has any elements.

UPDATE:

Try this one

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

edited Jun 04 '18 at 19:18

answered Jun 04 '18 at 14:41

IamCavic

368
1
15

Thank you for your reply. I'm getting `null` in console window. But I can show this class in DOM. – WebRence Jun 04 '18 at 14:48
@WebRence that means that DOM element doesn't exist or is created after the DOM has already loaded. – IamCavic Jun 04 '18 at 19:16
@WebRence I have updated the answer try the bottom part – IamCavic Jun 04 '18 at 19:19
1

thank you for your reply. but I'm not using jquery here and in call of jquery we can not fire service call because when I'm using `this.http.get()` in jquery click event it's not working. it show me error that `get()` method not found just because it's angular's HTTP method – WebRence Jun 06 '18 at 08:18
ahh sorry @WebRence not too familiar with Angular :( best of luck – IamCavic Jun 06 '18 at 14:46

click event is not firing on dynamically generated elements

1 Answers1