運行 jquery 一旦 div 的內容已完全加載

Question

我有一個使用 Javascript 動態加載的 div am-events-booking ，並且該 div 通常在頁面加載后需要一秒鍾左右的時間才能加載。 一旦這個 div 的內容完全加載，我想運行 jQuery 代碼。

下面是我用來將腳本運行延遲 5000 毫秒的解決方法，但這似乎不正確，因為如果頁面加載時間超過 5000 毫秒，那么腳本就不會運行。 有沒有更好的方法來做到這一點？ 可能是使用突變，如果是這樣，我該怎么做 go 呢？

 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>

Answer 1

你看過 jQuery.on('load') 嗎？

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

或者，你可以使用這樣的東西嗎？

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

所以在你的情況下，在你的代碼中包含 waitForEl function 然后使用它。 閱讀相關重構代碼的注釋，我剛剛看了第一部分。

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