JQuery не работает в сети, но работает в сохраненном коде

Question

У меня есть этот маленький код, который меняет div каждые 20 секунд.это работает, если я сохранил это в небольшом HTML-файле.это работает, если я сохраняю живой HTML-код и запускаю, но он не срабатывает на живом сайте.

вы можете видеть, что каждые 20 секунд меняется планка, но на моем живом сайте она не меняется.Живой сайт здесь.

https://pushdaddy2.myshopify.com/products/uhjkjhkhk

, но если я сохраню код живого сайта на рабочем столе и запусту этот код в chrome, он будет работать.

https://jsfiddle.net/anamika99/vhmo7ex4/

jQuery(document).ready(function($) {
  var allBoxes = $("div#qab_container").children("div");
  transitionBox(null, allBoxes.first());
//  console.log(allBoxes);
  $("#qab_background1, #qab_background2, #qab_background3, #qab_background4, #qab_background5, #qab_background6").css({
    "height": $("#qab_background").innerHeight()
  });
});


function transitionBox(from, to) {
  function next() {
    var nextTo;
    if (to.is(":last-child")) {
      nextTo = to.closest("#qab_container").children("div").first();
    } else {
      nextTo = to.next();
    }
    to.fadeIn(500, function() {
      setTimeout(function() {
        transitionBox(to, nextTo);
        var karreff = 787786766;
        console.log(karreff);
      }, 3000); // 20000 on site
    });
  }

  if (from) {
    from.fadeOut(500, next);
  } else {
    next();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="shopify-section-header" class="shopify-section">
  <div id="qab_container" style="display: block; color: inherit; height: 44px;">

    <div id="qab_background" onclick="qab_button_on_click(event)" style="opacity: 1; margin: 0px; padding: 0px; left: 0px; height: auto; width: 100%; z-index: 99998; position: fixed; cursor: pointer; background-image: url(&quot;https://way2enjoy.com/shopify/1/announcementbar/js/img/bar_background/20170926_cart.png&quot;); top: 0px;">
      <div id="qab_bar" style="text-align: center; margin: 0px; padding: 12px 10px; left: 0px; height: auto; width: 100%; box-sizing: border-box; border: none; background-color: rgba(5, 175, 242, 0); color: rgb(242, 242, 242); font-size: 16px; line-height: 20px; font-family: Helvetica;">
        <div id="qab_content" style="text-align:center; display: inline-block;"><span id="qab_message" style="color:inherit;">All t-shirts are 15% off </span> </div>
      </div>
    </div>
    <div id="qab_background1" onclick="qab_button_on_click1(event)" style="opacity: 0; margin: 0; padding: 0; left: 0; height: auto; width: 100%; z-index: 1000000; position: relative; cursor: pointer;">
      <div id="qab_bar1" style="text-align: center; margin: 0; padding: 10px; left: 0; height: auto; width: 100%; box-sizing: border-box; border: none;">
        <div id="qab_content1" style="text-align:center; display: inline-block;">
          <span id="qab_message1" style="color:inherit;">fghghghh hghghhfhhf fhfgf</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

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

мы установили settimeout для всехBoxes

ранее, что происходило из-за того, что наш код JavaScript занимал некоторое время для вставки вHTML и до того, как этот полный код выполнялся, и в то время в реальном времени не было никаких данных, которые нам были нужны, поэтому мы установили settimeout в 10 секунд, а затем все работало, потому что в течение этих 10 секунд все было загружено в DOM, и мы были готовы с полными данными,

вот полный код, который работает безупречно

jQuery(document).ready(function($) {

  setTimeout(function () {
      var allBoxes = $("div#qab_container").children("div");

transitionBox(null, allBoxes.first());
    console.log(allBoxes);
           }, 10000);   




  $("#qab_background1, #qab_background2, #qab_background3, #qab_background4, #qab_background5, #qab_background6").css({"height": $("#qab_background").innerHeight()});
});



function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest("#qab_container").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
                var karreff=787786766;
                console.log(karreff);
            }, 20000);
        });
    }

    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}