Обновить атрибуты HTML, если событие инициируется на динамически создаваемых элементах - PullRequest
Новая
       9

Обновить атрибуты HTML, если событие инициируется на динамически создаваемых элементах

0 голосов
/ 07 мая 2019

У меня есть простая форма с 1 полем ввода электронной почты и 1 кнопкой отправки.

Кнопка имеет значение disabled по умолчанию, и она доступна только при проверке электронной почты.

У меня есть 2 прослушивателя событий, один для поля ввода и другой для кнопки отправки следующим образом: 

let _preregForm = document.getElementById( 'form' );
let _emailInputField = document.getElementById( 'email-input' );
let _formSubmitButton = document.getElementById( 'submit-button' );

document.addEventListener( 'input', _handleEmailInput );
document.addEventListener( 'submit', _handleFormSubmission );

const _handleEmailInput = function( event ) {
    if ( event.target && 'input-field' === event.target.id ) {
        _emailValue = event.target.value;
        _toggleSubmitButton( validateEmail( event.target.value ) )
    }
}

const _handleFormSubmission = function( event ) {
    event.preventDefault();

    /* Some Ajax Call which refreshes the entire form based on response. */
}

const _toggleSubmitButton = function( enabled = false ) {
    console.log( _formSubmitButton )
    _formSubmitButton.disabled = ! enabled;
}

После того, как форма полностью обновлена ​​в ответе AJAX, событие input все еще успешно запускается в поле ввода, так как я прикрепил обработчик к document с проверкой if ( event.target && 'input-field' === event.target.id ).

console.log отображает правильный элемент HTML, но он не обновляется в DOM.

enter image description here

[Игнорировать имя ID, я упростил его выше.]

Как изменить код для обновления атрибута в DOM?

...