Как вызвать функцию после того, как div готов?

В моем файле javascript есть следующее:

var divId = "divIDer";

jQuery(divId).ready(function() {
  createGrid();  //Adds a grid to the html
});

html выглядит примерно так:

<div id="divIDer"><div>

Но иногда моя функция createGrid() вызывается до того, как мой divIder загружен на страницу. Поэтому, когда я пытаюсь отобразить свою сетку, он не может найти подходящий div для указания и никогда не будет рендерить. Как я могу вызвать функцию после того, как мой div полностью готов к использованию?

Edit:

Я загружаю div, используя Extjs:

var tpl = new Ext.XTemplate(
'<div id="{divId}"></div>');

tpl.apply({

});

Ответы

Ответ 1

Здесь вы можете использовать рекурсию. Например:

jQuery(document).ready(function() {
  checkContainer();
});

function checkContainer () {
  if($('#divIDer').is(':visible'))){ //if the container is visible on the page
    createGrid();  //Adds a grid to the html
  } else {
    setTimeout(checkContainer, 50); //wait 50 ms, then try again
  }
}

В принципе, эта функция будет проверять, чтобы убедиться, что элемент существует и является видимым. Если это так, он запустит вашу функцию createGrid(). Если нет, он будет ждать 50 мс и повторите попытку.

Примечание. В идеале вы просто используете функцию обратного вызова вашего вызова AJAX, чтобы знать, когда контейнер был добавлен, но это грубая сила, автономный подход.:)

Ответ 2

До сих пор единственным способом "прослушивания" событий DOM, таких как вставка или изменение элементов, было использование таких событий Mutation Events. Например,

document.body.addEventListener('DOMNodeInserted', function( event ) {
    console.log('whoot! a new Element was inserted, see my event object for details!');
}, false);

Дальнейшее чтение: MDN

Проблема с событиями мутаций была (есть), что они никогда не попадали в какую-либо официальную спецификацию из-за неудобств и т.д. Через некоторое время эти события были реализованы во всех современных браузерах, но они были объявлены устаревшими, другими словами вы не хотите их использовать.

Официальной заменой событий мутации является объект MutationObserver().

Дальнейшее чтение: MDN

Синтаксис в настоящее время выглядит как

var observer = new MutationObserver(function( mutations ) {
    mutations.forEach(function( mutation ) {
         console.log( mutation.type );
    }); 
});

var config = { childList: true };

observer.observe( document.body, config );

В настоящее время API реализован в новых версиях Firefox, Chrome и Safari. Я не уверен в IE и Opera. Таким образом, компромисс здесь определенно означает, что вы можете ориентироваться только на верхние браузеры.

Ответ 3

С помощью функции jQuery.ready вы можете указать функцию, выполняемую при загрузке DOM. Целый DOM, а не любой div, который вы хотите.

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

$.ready(function() {
    createGrid();
});

Это в случае, если вы не используете AJAX для загрузки div

Ответ 4

внутри вашего элемента <div></div> вы можете вызвать команду $(document).ready(function(){}); выполнить команду, что-то вроде

<div id="div1">
    <script>
        $(document).ready(function(){
         //do something
        });
    </script>
</div>

и вы можете сделать то же самое с другими divs, которые у вас есть. это было удобно, если вы загрузили свой div через частичный вид