Angular and jQuery: Events not attached to dynamically created HTML elements

Question

I am using jQuery to dynamically create new elements in an Angular Form. The form is built using Template Driven Forms approach. The dynamic elements are successfully created but they are not assigned events/callbacks apparently because the component was already compiled and did not re-compile for the dynamic elements. This keeps the new elements from reporting data or responding despite that the name attribute and ngModel directive is assigned to it. How do I go about this? I have to read the form data for storing in database.

The TypeScript File code which generates the new component's HTML is as under (do not focus on class/ID names etc for I modified them for simplifying question statement). The function uses a counter for assigning unique name to the new input element.

private counter = 0;

increaseElementDynamically(){
this.counter++;
var htmlTagDef = '<input #benchReff'+this.counter.toString()+' ="ngModel" type="text" class=" form-control mb-3" id="bench'+this.counter.toString()+'" required name="bench'+this.counter.toString()+'" ngModel>';
$("#myDiv").append(htmlTagDef);
console.log(htmlTagDef);

}

The input element is written as under in the component's HTML file

 <div class="form-group col-lg-3 border-right border-primary">
            <label for="benchGroup">Bench Members</label>
            <div ngModelGroup="benchGroup">
                <div id="customDiv">
                    <input #benchReff ="ngModel" type="text" class=" form-control mb-3" id="bench" required name="bench" ngModel> 
                </div>
            </div>
            <button type="button"  class="btn btn-primary float-right m-3" (click)="iincreaseElementDynammically()">Add</button> 
 </div>

Even if a simple click event is assigned, it wont work for the dynamically created elements since they were created on runtime.

How can the proper dynamic behavior be achieved with functionality?

your function is called "increaseElementDynamically" but in the HTML you call "iincreaseElementDynamically" (two i's at the start) Could that be your problem? — Michiel
– Michiel, Commented Aug 28, 2018 at 9:49
No, the issue was jQuery was creating elements, but Angular was never becoming aware of their presence. Issue got solved by eliminating jQuery from doing the job and handing it to Angular itself using arrays and ngFor. — Mubashir Irfan
– Mubashir Irfan, Commented Aug 28, 2018 at 12:50

Bhushan Kawadkar · Accepted Answer · 2018-08-28 08:53:34Z

1

you need to attach click event or any other event handler using parent element delegation.

$('#myDiv').on('click','#bench', function(){ // will be triggered on click of bench input which is added dynamically
  console.log('clicked');
});

answered Aug 28, 2018 at 8:53

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

3 Comments

Mubashir Irfan Over a year ago

How to use this for the data reporting? The elements are supposed to report data due to the ngModel assigned to them.

Bhushan Kawadkar Over a year ago

I have provided solution to attach click event handler for dynamically created elements. for Angular ngmodal, you should visit stackoverflow.com/questions/40861926/…

Mubashir Irfan Over a year ago

ng-Repeat won't work but ngFor eventually solved the issue. Many thanks!

Mubashir Irfan · Accepted Answer · 2018-08-28 12:01:32Z

0

Solution: jQuery was operating on front end whereas the component was recompiling. Better approach was to eliminate jQuery and use ngFor directive. For new [dynamic] elements, new IDs can be pushed to an array with ngFor operating on same array to dynamically create elements which fully supported Angular functionality.

answered Aug 28, 2018 at 12:01

Mubashir Irfan

431 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular and jQuery: Events not attached to dynamically created HTML elements

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related