时间戳

首页 > 解决方案 > 运行 jquery 一旦 div 的内容已完全加载

javascript - 运行 jquery 一旦 div 的内容已完全加载

问题描述

我有一个am-events-booking使用 Javascript 动态加载的 div，这个 div 通常在页面加载后需要一秒钟左右的时间才能加载。一旦这个 div 的内容完全加载，我想运行一个 jQuery 代码。

下面是我用来将脚本运行延迟 5000 毫秒的解决方法，但这似乎不正确，因为如果页面加载时间超过 5000 毫秒，那么脚本就不会运行。有没有更好的方法来做到这一点？可能是使用突变，如果是这样，我该怎么做？

jQuery(document).ready(function($) {
  $(document).ready(function() {
    var i = setInterval(function() {
      if ($("#am-events-booking").text().length > 0) {
        clearInterval(i);

        $(".am-event-data").addClass('bg');

      } else {
        console.log("Waiting...");
      }
    }, 5000);
    console.log("Page is loaded");
  });
});
.am-event-data {
  border: 1px solid black;
  padding: 10px;
  width: 50%;
}

.bg {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="am-events-booking">


  <div class="am-event-data">
    <div class="am-event-date">
      <div class="am-event-date-month" style="color: rgb(249, 169, 126);">Mar</div>
      <div class="am-event-date-day">24</div>

    </div>
    <div class="am-event-info">
      <div class="am-event-title">Ballet
        <span class="am-event-booking-status open">Open</span></div>
    </div>
  </div>


  <div class="am-event-data">
    <div class="am-event-date">
      <div class="am-event-date-month" style="color: rgb(249, 169, 126);">April</div>
      <div class="am-event-date-day">25</div>

    </div>
    <div class="am-event-info">
      <div class="am-event-title">Other
        <span class="am-event-booking-status open">Open</span></div>
    </div>
  </div>
</div>

标签： javascriptjquery

解决方案

你看过 jQuery .on('load') 吗？

以下答案可能会有所帮助 - https://stackoverflow.com/a/58871367/3907839

或者，你可以使用这样的东西吗？

https://gist.github.com/chrisjhoughton/7890303#file-wait-el-js

因此，在您的情况下，请在代码中包含 waitForEl 函数，然后使用它。阅读相关重构代码的注释，我刚刚看了第一部分。

waitForEl($("#am-events-booking"), function() {
    $(".am-event-data").addClass('bg');
});

推荐阅读