JavaScript: добавление прослушивателей событий в динамическую форму, где отсутствуют определенные элементы формы при загрузке страницы?

Question

Мне интересно, есть ли способ добавить прослушиватели событий в поля формы, которые являются динамическими и не присутствуют при загрузке страницы?Моя проблема в том, что я работаю с формой, которая динамична и изменяется на основе сделанных выборов.Проблема в том, что мне нужно прикрепить прослушиватели событий к определенным полям формы, но при загрузке страницы не все эти элементы формы существуют?Например, нижеприведенный выпадающий список всегда будет существовать на странице:

`var employmentStatusSelect = document.getElementById('mainForm:cont_appRequestStatus');
employmentStatusSelect.addEventListener('change',trackEmploymentStatusSelect);`

, но в следующем поле будет отображаться, если есть определенный выбор сверху элемента

var startCurrentJobInput = document.getElementById('mainForm:cont_appRequeststart_job');

startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);

, поскольку он не 'Когда страница загружается, я не могу прикрепить прослушиватель событий, и приведенный выше код выдает ошибку.Есть ли способ прикрепить слушатель события ко 2-му элементу, как только он появится?Только JavaScript, пожалуйста!* Я не могу внести изменения в форму или страницу и могу только ввести свой код через систему управления тегами *

Answer 1

Обнови лучше.Оказывается, если вы добавите слушатель события размытия в форму, все входные элементы также будут вызывать это событие.https://developer.mozilla.org/en-US/docs/Web/Events/blur

var form = document.getElementById('mainForm');

form.addEventListener('blur', function( event ) {   
    if(event.target.matches('#cont_appRequeststart_job')){
      console.log('blur event triggered');
    }
}, true);

// add input
var input = document.createElement('input');
input.id = 'cont_appRequeststart_job';
form.appendChild(input)

<form id="mainForm">
    
</form>

Вы можете продолжать пробовать каждые 0,5 с, пока элемент не существует.Не рекомендуется.

function tryBindEvent(){
    var startCurrentJobInput = document.getElementById('mainForm:cont_appRequeststart_job');
    if(startCurrentJobInput){
        startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);
    }else{
        setTimeout(tryBindEvent, 500);
    }   
}
tryBindEvent();

Answer 2

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

document.addEventListener('change', function(e) {
    if(e.target && e.target.id === 'mainForm:cont_appRequeststart_job') {
        //do something
    }
});

Answer 3

Прежде всего, если вы поделитесь большим количеством кодов, вам может помочь помощь.Но, я думаю, вам следует запустить функцию (сейчас я назову ее assign()), чтобы присвоить значение startCurrentJobInput, когда employmentStatusSelect имеет значение.

Итак, я рекомендуюВы должны определить startCurrentJobInput переменную глобально следующим образом (я думаю, она понадобится вам глобально для использования в других функциях):

var startCurrentJobInput;

И пока не добавляйте прослушиватель событий.Затем, когда выбран employmentStatusSelect и создан новый элемент формы, запустите assign func, чтобы присвоить document.getElementById('mainForm:cont_appRequeststart_job') startCurrentJobInput.Затем вы можете добавить к нему прослушиватель событий с помощью:

startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);