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

【问题标题】：Angular and jQuery: Events not attached to dynamically created HTML elementsAngular 和 jQuery：未附加到动态创建的 HTML 元素的事件
【发布时间】：2018-08-28 08:51:18
【问题描述】：

我正在使用 jQuery 在 Angular 表单中动态创建新元素。该表单是使用模板驱动表单方法构建的。动态元素已成功创建，但显然没有为它们分配事件/回调，因为组件已经编译并且没有为动态元素重新编译。尽管已为其分配了 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>

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

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

【问题讨论】：

您的函数称为“increaseElementDynamically”，但在 HTML 中您称为“iincreaseElementDynamically”（开头有两个 i）这可能是您的问题吗？
不，问题是 jQuery 正在创建元素，但 Angular 从未意识到它们的存在。通过消除 jQuery 的工作并使用数组和 ngFor 将其交给 Angular 本身，问题得到了解决。

标签： javascript jquery html angular

【解决方案1】：

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

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

【讨论】：

如何使用它进行数据报告？由于分配给它们的 ngModel，这些元素应该报告数据。
我提供了为动态创建的元素附加点击事件处理程序的解决方案。对于 Angular ngmodal，您应该访问 stackoverflow.com/questions/40861926/…
ng-Repeat 不起作用，但 ngFor 最终解决了这个问题。非常感谢！

【解决方案2】：

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

【讨论】：