How to add click event on element added by jquery append or prepend in angular 4

257
January 21, 2018, at 7:17 PM

I am working on a project and I have used fancy select for more attractive selector drop down option. I have appended the fancy select using jquery and now I want to listen to an click event form those appended select options. I thought of using jquery event handler but i can only write jquery code inside function for example inside appendOptions(){} or ngOnInit(){} but this will execute only when function is executed.

appendOptions(){
  this.categories = this.response.data.categories;  //this is response form api
  jQuery('.newSelect').prepend('<div class="selectedOption">Browse Categories</div><div class="newOptions"></div>'); //prepending the outer element
  for (let cat of this.categories) {
    jQuery('.newOptions').append('<div class="newOption" data-value="' + cat.id + '">' + cat.category + '</div>');  //appending options element
  }
  // i can write jquery code here 
}
// i cant write jquery here 

I tried to user render2 of angular but I cant figure out the click of the options. all the native element will fire this element.

ngOnInit(){
   this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => {
      this.handleClick(event);
  })
}

How can I reference using element class or id and get their data values? I also tried using @ViewChild but I don't know how to add element reference (eg: #element) dynamically. And I am not being able to think what to use. Thanks in advance.

Rent Charter Buses Company
READ ALSO
Showing and Hiding of elements

Showing and Hiding of elements

In the following code, my idea is when I click on the table field, an input to be shown and for there the inputted value to be multiplied by the corresponding numberIt all works fine, BUT when I am trying to change the numbers(access the input again),...

200
How do I mock or fake behavior of a website to allow unit testing for certain JS functions

How do I mock or fake behavior of a website to allow unit testing for certain JS functions

Situation: I just started to learn (unit) testing my javascript code and I am wondering, if there is a way to fake the behavior of the application in order to test certain casesI read about sinon

201
jquery - change atribute according ID [duplicate]

jquery - change atribute according ID [duplicate]

This question already has an answer here:

199
calling values from a different model - Django

calling values from a different model - Django

A little stuck on this, i'm close to it, but sure i'm missing something

203