Angular和jQuery：事件未附加到动态创建的HTML元素

Question

我正在使用jQuery在Angular Form中动态创建新元素。 该表单是使用“模板驱动表单”方法构建的。 动态元素已成功创建，但显然未为它们分配事件/回调，因为该组件已被编译且未针对动态元素重新编译。 尽管已将name属性和ngModel伪指令分配给新元素，但仍可防止它们报告或响应数据。 我该怎么办？ 我必须读取用于存储在数据库中的表单数据。

生成新组件的HTML的TypeScript文件代码如下所示（不要将重点放在类/ ID名称上，因为我为了简化问题陈述而对其进行了修改）。 该函数使用计数器为新输入元素分配唯一名称。

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

}

输入元素的编写方式如下于组件的HTML文件

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

即使分配了简单的click事件，它也不适用于动态创建的元素，因为它们是在运行时创建的。

如何通过功能实现适当的动态行为？

Answer 1

您需要使用父元素委派附加点击事件或任何其他事件处理程序。

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

Answer 2

解决方案：jQuery在前端运行，而组件在重新编译。 更好的方法是消除jQuery，并使用ngFor指令。 对于新的[dynamic]元素，可以使用ngFor将新的ID推送到一个数组，该ngFor在同一数组上运行以动态创建完全支持Angular功能的元素。