Код JavaScript не меняет стиль динамически генерируемого HTML-кода

Question

Итак, я написал код JavaScript для динамического создания HTML-кода для отображения изображений на странице моего сайта. В этом динамическом коде я назначил каждому изображению тег кнопки, чтобы при входе моего пользователя отображалась эта кнопка (это кнопка x, чтобы пользователь мог ее удалить), а когда я выходил из системы, яожидайте, что эти кнопки уйдут, т. е. с помощью оператора if, проверяющего, присутствует ли аутентифицированный пользователь, отобразите и, если нет, установите для дисплея значение none. Тем не менее, мой javascript для изменения стиля на none, если нет пользователя, не применяется. У меня есть та же самая функция, работающая для двух жестко запрограммированных кнопок (кнопка загрузки изображения и кнопка выхода из системы, и они работают нормально). Он просто работает с динамически генерируемым кодом.

Я попытался добавить стандартный стиль 'display =' display: none; 'в динамическом HTML, и я также попытался поместить эту же линию стиля в моем документе CSS, и ни один из них не работает. По умолчанию для отображения установлено значение none, затем после входа в систему измените стиль на display: block.

Javascript, чтобы проверить, вошел ли пользователь в систему, и затем соответствующим образом измените стиль. :

const loggedIn = document.querySelectorAll('.logged-in');
const loggedInX = document.querySelectorAll('.logged-inX');

const setupUI = (user) => {
    if(user){
        //toggle UI elements
        loggedIn.forEach(item => item.style.display = 'block');
        loggedInX.forEach(item => item.style.display = 'block');

    }
    else{
        loggedIn.forEach(item => item.style.display = 'none');
        loggedInX.forEach(item => item.style.display = 'none');


    }
}

Javascript для загрузки изображений из базы данных и генерации кода:

var database = firebase.database().ref().child('Posts/');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        var counter=0;
        snapshot.forEach(function(data){
            var url = data.val().url;
            var dimensions = data.val().dimensions;
            var title = data.val().title;
            var year = data.val().year;
            var medium = data.val().year;

            content += '<div class="col-xl-4 col-xs-12 imageGrid">';
            content += '<a class="example-image-link" href="'+url+'" data-lightbox="example-1 '+counter+'"><img class="example-image" width="300" height="200" src="'+url+'" alt="image-1"/></a>';
            content += '<button class="imageButton logged-inX">x</button>';
            content += '</div>';
            counter++;
        });
        $('.displayImagesFromFirebase').append(content);
    }
});

Итак, я хочу, чтобы эти кнопки в динамически генерируемом HTML-коде отображались, если естьпользователь, и не отображается, если нет аутентифицированного пользователя. Этот код работает с жестко закодированным html на странице, но не с динамически генерируемым кодом из этой функции.

Answer 1

Поскольку вы вызываете setupUI только при первой показе страницы, это единственный раз, когда она показывает / скрывает элементы. На любые элементы, сгенерированные после этого факта, не влияет код в setupUI.

. Самое простое решение - переместить вызовы querySelectorAll в setupUI и затем повторно выполнить setupUI, когдаВы изменяете HTML:

const setupUI = (user) => {
    const loggedIn = document.querySelectorAll('.logged-in');
    const loggedInX = document.querySelectorAll('.logged-inX');

    if(user){
        //toggle UI elements
        loggedIn.forEach(item => item.style.display = 'block');
        loggedInX.forEach(item => item.style.display = 'block');    
    }
    else{
        loggedIn.forEach(item => item.style.display = 'none');
        loggedInX.forEach(item => item.style.display = 'none');    
    }
}

А затем:

var database = firebase.database().ref().child('Posts/');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        var counter=0;
        snapshot.forEach(function(data){
            var url = data.val().url;
            var dimensions = data.val().dimensions;
            var title = data.val().title;
            var year = data.val().year;
            var medium = data.val().year;

            content += '<div class="col-xl-4 col-xs-12 imageGrid">';
            content += '<a class="example-image-link" href="'+url+'" data-lightbox="example-1 '+counter+'"><img class="example-image" width="300" height="200" src="'+url+'" alt="image-1"/></a>';
            content += '<button class="imageButton logged-inX">x</button>';
            content += '</div>';
            counter++;
        });
        $('.displayImagesFromFirebase').append(content);
        setupUI(firebase.auth().currentUser);
    }
});