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
– WebRence, Commented Jun 4, 2018 at 14:34
The code you pasted here is very confusing. Could you provide minimal reproducible example please — Vega
– Vega, Commented Jun 4, 2018 at 14:40
You should google about event delegation. There are a lot of SO questions about it too- stackoverflow.com/questions/203198/… — Andrew L
– Andrew L, Commented Jun 4, 2018 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 :- stackoverflow.com/questions/38053067/… — WebRence
– WebRence, Commented Jun 4, 2018 at 14:46

IamCavic · Accepted Answer · 2018-06-04 19:18:59Z

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 4, 2018 at 19:18

answered Jun 4, 2018 at 14:41

IamCavic

3762 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

WebRence Over a year ago

Thank you for your reply. I'm getting null in console window. But I can show this class in DOM.

IamCavic Over a year ago

@WebRence that means that DOM element doesn't exist or is created after the DOM has already loaded.

IamCavic Over a year ago

@WebRence I have updated the answer try the bottom part

WebRence Over a year ago

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

IamCavic Over a year ago

ahh sorry @WebRence not too familiar with Angular :( best of luck

Collectives™ on Stack Overflow

click event is not firing on dynamically generated elements

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related