Как запустить функцию javascript при загрузке div (но не ждать, пока будет загружен весь документ)?

Question

Я использую меню, вкладки и т. Д. c. на моей странице HTML, которую нужно инициализировать в JavaScript, например:

<ul class="k-menu">
...some menu items
</ul>
<script type="text/javascript">$('.k-menu').kendoMenu();</script>
// This works without any problem

Теперь я хочу удалить из HTML и поместить в отдельный файл JS.

$('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
});

Но теперь, как я могу запустить kendoMenu сразу после загрузки элемента ul? Когда я буду использовать следующий пример, kendoMenu будет инициализирован после загрузки документа:

$(document).ready(function() {
    $('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
    });
});

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

Я попытался использовать setTimenout, но я не уверен, если элемент загружен до того, как тайм-аут сработает.

setTimeout(() => {
  $('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
    });
}, 100);

Answer 1

AFAIK, есть способ использовать MutationObserver
. Вы можете обнаружить изменение DOM на родительском узле, если добавлен какой-либо дочерний узел, и если добавленный узел - ul, который вы хотите, затем запустите kendoMenu()

Пример:

document.querySelector("button").addEventListener("click", function () {
  document.body.appendChild(document.createElement("span"));
});

var observer = new MutationObserver(function (m) {
  if (m[0].addedNodes[0].nodeName === "SPAN")
    document.querySelector("div").innerHTML += "Change Detected<br>";
});

observer.observe(document.body, {childList: true});

<button>Click</button>
<div></div>

Вот еще один пример, который показывает, что обратный вызов MutationObserver запускается, как только DOM загружает элемент во время загрузки страницы:

// The other <script> tags are there just to demonstrate that the timing is proper;
// on a large page, the MutationObserver callback will be called as soon as the `ul.k-menu` exists,
// without waiting for the rest of the page to download

<script>
window.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded');
});
var observer = new MutationObserver((mutations, observer) => {
  const ul = document.querySelector('ul.k-menu');
  if (!ul) {
    return;
  }
  console.log('MutationObserver callback saw that ul.k-menu was just added to DOM');
  observer.disconnect();
  // call .kendoMenu()...
});

observer.observe(document.body, {childList: true});
</script>
<div>Some other div</div>
<script>console.log('Node just before k-menu added to DOM');</script>
<ul class="k-menu">
  ...some menu items
</ul>
<script>console.log('Node after k-menu added to DOM');</script>
<div>Some other div</div>