div准备好后如何调用函数？

I have the following in my javascript file:

我的javascript文件中有以下内容：

var divId = "divIDer";

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

The html looks something like:

html看起来像：

<div id="divIDer"><div>

But sometimes my createGrid() function gets called before my divIder is actually loaded onto the page. So then when I try to render my grid it can't find the proper div to point to and doesn't ever render. How can I call a function after my div is completely ready to be used?

但有时我的createGrid（）函数会在我的divIder实际加载到页面之前被调用。那么当我尝试渲染我的网格时，它找不到适当的div来指向并且不会渲染。在我的div完全准备好使用后，如何调用函数？

Edit:

编辑：

I'm loading in the div using Extjs:

我正在使用Extjs加载div：

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

tpl.apply({

});

6 个解决方案

#1

You can use recursion here to do this. For example:

您可以在此处使用递归来执行此操作。例如：

jQuery(document).ready(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
  }
}

Basically, this function will check to make sure that the element exists and is visible. If it is, it will run your createGrid() function. If not, it will wait 50ms and try again.

基本上，此函数将检查以确保元素存在且可见。如果是，它将运行您的createGrid（）函数。如果没有，它将等待50ms并再试一次。

Note:: Ideally, you would just use the callback function of your AJAX call to know when the container was appended, but this is a brute force, standalone approach. :)

注意::理想情况下，您只需使用AJAX调用的回调函数来了解何时附加了容器，但这是一种强力独立的方法。 :)

#2

Thus far, the only way to "listen" on DOM events, like inserting or modifying Elements, was to use the such called Mutation Events. For instance

到目前为止，“监听”DOM事件（如插入或修改元素）的唯一方法是使用这种称为Mutation Events的方法。例如

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

Further reading on that: MDN

进一步阅读：MDN

The Problem with Mutation Events was (is) they never really made their way into any official spec because of inconcistencies and stuff. After a while, this events were implemented in all modern browser, but they were declared as deprecated, in other words you don't want to use them.

突变事件的问题是因为不一致和事情，他们从未真正进入任何官方规范。过了一会儿，这个事件在所有现代浏览器中实现，但是它们被声明为不推荐使用，换句话说你不想使用它们。

---

The official replacement for the Mutation Events is the MutationObserver() object.

Mutation事件的官方替代品是MutationObserver（）对象。

Further reading on that: MDN

进一步阅读：MDN

The syntax at present looks like

目前的语法看起来像

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

var config = { childList: true };

observer.observe( document.body, config );

At this time, the API has been implemented in newer Firefox, Chrome and Safari versions. I'm not sure about IE and Opera. So the tradeoff here is definitely that you can only target for topnotch browsers.

目前，该API已在较新的Firefox，Chrome和Safari版本中实施。我不确定IE和Opera。所以这里的权衡肯定是你只能针对一流的浏览器。

#3

inside your <div></div> element you can call the $(document).ready(function(){}); execute a command, something like

在你的

元素中你可以调用$（document）.ready（function（）{}）;执行一个命令，比如

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

and you can do the same to other divs that you have. this was suitable if you loading your div via partial view

你可以对你拥有的其他div做同样的事情。如果您通过局部视图加载div，这是合适的

#4

Through jQuery.ready function you can specify function that's executed when DOM is loaded. Whole DOM, not any div you want.

通过jQuery.ready函数，您可以指定在加载DOM时执行的函数。整个DOM，不是你想要的任何div。

So, you should use ready in a bit different way

所以，你应该以一种不同的方式使用ready

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

This is in case when you dont use AJAX to load your div

这是在你不使用AJAX加载你的div的情况下

#5

To do something after certain div load from function .load(). I think this exactly what you need:

在从函数.load（）获得某些div加载后执行某些操作。我认为这正是你所需要的：

  $('#divIDer').load(document.URL +  ' #divIDer',function() {

       // call here what you want .....


       //example
       $('#mydata').show();
  });

#6

We can do it either by setTimeout or requestAnimationFrame

我们可以通过setTimeout或requestAnimationFrame来实现

jQuery(document).ready(checkContainer);

Using setTimeout

使用setTimeout

function checkContainer () {
  if(!$('#divIDer').is(':visible'))){
    setTimeout(checkContainer, 50);
   } else {
   createGrid();
  }
}

or using window.requestAnimationFrame(recommended)

或使用window.requestAnimationFrame（推荐）

function checkContainer () {
  if(!$('#divIDer').is(':visible'))){
    window.requestAnimationFrame(checkContainer);
   } else {
   createGrid();
  }
}

In case you need to pass a parameter then use like below

如果您需要传递参数，请使用如下所示

setTimeout(function(){ checkContainer('parameter'); }, 50);
window.requestAnimationFrame(function(){ checkContainer('parameter'); })

;

;