Angular и jQuery: события, не связанные с динамически создаваемыми элементами HTML

Question

Я использую jQuery для динамического создания новых элементов в угловой форме. Форма построена с использованием подхода Template Driven Forms. Динамические элементы успешно созданы, но им не назначены события / обратные вызовы, очевидно, потому что компонент уже был скомпилирован и не перекомпилирован для динамических элементов. Это не позволяет новым элементам сообщать данные или отвечать, несмотря на то, что ему назначены атрибут name и директива ngModel. Как мне это сделать? Я должен прочитать данные формы для хранения в базе данных.

Код файла TypeScript, который генерирует HTML нового компонента, приведен ниже (не сосредотачивайтесь на именах классов / идентификаторов и т. Д., Поскольку я изменил их для упрощения формулировки вопроса). Функция использует счетчик для присвоения уникального имени новому элементу ввода.

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

Решение: jQuery работал на внешнем интерфейсе, тогда как компонент перекомпилировался. Лучшим подходом было исключить jQuery и использовать директиву ngFor. Для новых [динамических] элементов новые идентификаторы могут быть помещены в массив с помощью ngFor, работающего с тем же массивом, чтобы динамически создавать элементы, которые полностью поддерживают угловую функциональность.

Answer 2

вам нужно прикрепить событие click или любой другой обработчик события, используя делегирование родительского элемента.

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