javascript - Angular 和 jQuery : Events not attached to dynamically created HTML elements

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>

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

如何通过功能实现正确的动态行为？

Answer 1

您需要使用父元素委托(delegate)附加单击事件或任何其他事件处理程序。

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