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功能的元素。