Как я могу изменить css для элементов, созданных динамически?

Question

У меня есть скрипт jquery, который динамически генерирует элементы на свитке. По умолчанию стиль наложения для этих элементов установлен как visibility: hidden Я решил изменить стиль наложения «на лету» и сделать их видимыми:

 $(' #switch').click(function() {
        if ($(this).prop("checked") == true) {          


            $('.footer-inner').css({ visibility: 'visible' });

        } else if ($(this).prop("checked") == false) {

            $('.footer-inner').css('visibility', 'hidden');

        }
    });

Код срабатывает хорошо для всех элементов уже создан на странице. Но если я прокручиваю вниз, новостные элементы без оверлея не видны.

Answer 1

Я бы просто переключил класс CSS на родительский элемент и использовал бы стиль, чтобы показать и скрыть элемент. Не нужно беспокоиться о вызове функции при обновлении страницы. Это просто применяется.

$('#switch').on('change', function() {
  $(".wrapper").toggleClass("show-footer", this.checked)
}).change();

var i = 4;
window.setInterval(function() {
  i++
  $(".wrapper").append(`<div>${i}</div><div class="footer-inner">${i}X</div>`)
}, 2000)

.wrapper .footer-inner {
  display: none;
}

.wrapper.show-footer .footer-inner {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="switch"><label>Toggle</label>

<div class="wrapper">
  <div>1</div>
  <div class="footer-inner">1X</div>
  <div>2</div>
  <div class="footer-inner">2X</div>
  <div>3</div>
  <div class="footer-inner">3X</div>
  <div>4</div>
  <div class="footer-inner">4X</div>

По-вашему, переключая видимость, вам нужно будет вызвать функцию после обновления страницы. Поэтому вам нужно будет позвонить $('#switch').click(), когда вы сделаете обновление.

И, в зависимости от макета, можно сделать это в чистом виде CSS, используя состояние флажка.

var i = 4;
window.setInterval(function() {
  i++
  $(".wrapper").append(`<div>${i}</div><div class="footer-inner">${i}X</div>`)
}, 2000)

.wrapper .footer-inner {
  display: none;
}

#switch:checked + label + .wrapper .footer-inner {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="switch"><label>Toggle</label>
<div class="wrapper">
  <div>1</div>
  <div class="footer-inner">1X</div>
  <div>2</div>
  <div class="footer-inner">2X</div>
  <div>3</div>
  <div class="footer-inner">3X</div>
  <div>4</div>
  <div class="footer-inner">4X</div>