CSS / JS не работает с контентом, полученным через AJAX

Question

Я создаю приложение, в котором карты накладываются друг на друга, например, "трут" (название, например, только). Это работает нормально, когда я получаю данные, обычно используя l oop на той же странице. Тем не менее, когда я получаю те же данные с помощью AJAX с другой страницы, карты отображаются один за другим сверху вниз, а не с перекрытием. Я не понимаю, если это проблема с CSS / JS, когда не загружается AJAX извлеченное содержимое, или проблема заключается в том, что я не могу обнаружить, потому что остальные css стили в дизайне карты работают хорошо, но потом больше не перекрывается при использовании AJAX. Я попытался поместить страницы CSS и JS для считывания карт в cards.php также в надежде, что возвращенный файл с JS может сработать, хотя я чувствовал, что это не очень хорошая идея (но все же сделал это для проверьте, смогу ли я поймать ошибку) но все равно она не работает. Попробовал все, что было возможно для меня, но не повезло.

Прекрасный рабочий код, когда я получаю напрямую:

<div class="stackedcards-container">
<?php
  $users = $pdo->prepare("SELECT * FROM members WHERE mem_id != :mem AND mem_sex != :sex");
  $users-> bindValue(':mem', $sessionUser);
  $users-> bindValue(':sex', $mySex);
  $users-> execute();

  while($a = $users->fetch()){
?>
  <div class="cards">
    <div class="card-content">
      <div class="card-image"><img src="images/Adventure_and_Outdoor.png" width="100%" height="100%"/></div>
    </div>
    <div class="card-footer">
      <div class="popular-destinations-text"><span class="name"><?php echo $a['mem_fname']; ?></span> <br/> <small><?php echo $userAge; ?>, <?php echo ucfirst($a['mem_sex']); ?> &middot; <?php echo $distData; ?></small> <br/> <small>Siliguri, West Bengal, IN</small></div>
      <div class="popular-destinations-images">
        <div class="circle"><img src="images/Adventure_and_Outdoor.png" width="100%" height="100%"/></div>
        <div class="circle"><img src="images/Adventure_and_Outdoor.png" width="100%" height="100%"/></div>
        <div class="circle"><img src="images/Adventure_and_Outdoor.png" width="100%" height="100%"/></div>
      </div>
    </div>
  </div>
<?php } ?>
<div>

Но это служит цели, только когда страница обновляется. Однако я хочу сделать это автоматом c. Следовательно, я хочу отсканировать эти данные, и если новая запись существует, она должна быть загружена.

Вот что я попробовал

index. php

<div class="stackedcards-container">
  <div class="getcards"></div>
</div>

<script>
  setInterval(function(){
    $(".getcards").load("processes/cards.php").fadeIn("slow");
  }, 1000);
</script>

карты. php

<?php
$users = $pdo->prepare("SELECT * FROM members WHERE mem_id != :mem AND mem_sex != :sex");
  $users-> bindValue(':mem', $sessionUser);
  $users-> bindValue(':sex', $mySex);
  $users-> execute();

while($a = $users->fetch()) {
?>
<div class="cards">
  <div class="card-content">
    <div class="card-image"><img src="https://image.ibb.co/gQsq07/Adventure_and_Outdoor.png" width="100%" height="100%"/></div>
  </div>
  <div class="card-footer">
    <div class="popular-destinations-text"><span class="name"><?php echo $a['mem_fname']; ?></span> <br/> <small><?php echo $userAge; ?>, <?php echo ucfirst($a['mem_sex']); ?> &middot; <?php echo $distData; ?></small> <br/> <small>Siliguri, West Bengal, IN</small></div>
    <div class="popular-destinations-images">
      <div class="circle"><img src="https://image.ibb.co/jmEYL7/adventure_1.jpg" width="100%" height="100%"/></div>
      <div class="circle"><img src="https://image.ibb.co/nsCynn/adventure_2.jpg" width="100%" height="100%"/></div>
      <div class="circle"><img src="https://image.ibb.co/hmsL07/adventure_3.jpg" width="100%" height="100%"/></div>
    </div>
  </div>
</div>
<?php } ?>

Когда я выполняю этот метод карты отображаются, но не следуют обычному методу перекрытия, как в первом рабочем коде. Карты отображаются одна за другой, все сразу сверху вниз (как обычные записи таблицы). Как можно добиться такого же результата, как я получаю в рабочем коде через AJAX?

Кроме того, если у меня возникает ощущение, что, поскольку загрузка содержимого с другой страницы не работает, загрузка содержимого с той же страницы "может" работать. Если это возможно, пожалуйста, помогите мне загрузить содержимое с той же страницы. Мы можем дать ему шанс (если возможно) проверить, работает ли он. Я попробовал это так, как показано ниже, но это не сработало.

index. php

<div class="stackedcards-container">
  <div class="getcards"></div>
</div>

<script>
  setInterval(function(){
    $(".getcards").load("index.php .stackedcards-container").fadeIn("slow");
  }, 1000);
</script>

EDIT

Я добавление снимков экрана для справки.

снимок экрана 1: Работает нормально, если НЕ используется AJAX. См. Две карты, накладывающиеся друг на друга.

Скриншот 2: Перекрытие не работает при использовании AJAX. Карты отображаются сверху вниз.

Answer 1

У вас проблема CSS? Вы можете предоставить скриншот?

Ваш контент, извлеченный ajax, должен вести себя так же. Единственное, что я вижу, это то, что у вас есть дополнительный контейнер при использовании ajax stackedcards-container . Возможно ли, что ваша проблема с макетом связана с этим?

ex:

body > .cards

или

body { width:100%; height:100%; }
# stackedcards-container missing styles and not expending