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

Question

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

var divId = "divIDer";

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

html 看起来像：

<div id="divIDer"><div>

但有时我的 createGrid() 函数会在我的 divIder 实际加载到页面上之前被调用。因此，当我尝试渲染我的网格时，它找不到正确的 div 指向并且永远不会渲染。我的 div 完全可以使用后如何调用函数？

编辑：

我正在使用 Extjs 加载 div：

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

tpl.apply({

});

Answer 1

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

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
  }
}

基本上，此函数将检查以确保元素存在且可见。如果是，它将运行您的createGrid() 函数。如果没有，它将等待 50 毫秒，然后重试。

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

Answer 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

变异事件的问题是（是）由于不一致和其他原因，它们从未真正进入任何官方规范。一段时间后，这个事件在所有现代浏览器中都实现了，但它们被声明为 deprecated，换句话说 你不想使用它们。

---

变异事件的官方替换是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。所以这里的权衡绝对是你只能针对顶级浏览器。

Answer 3

在从函数.load() 加载某些 div 之后执行某些操作。 我认为这正是您所需要的：

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

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


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

Answer 4

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

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

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

这是在您不使用 AJAX 加载 div 时的情况

Answer 5

在 <div></div> 元素中，您可以调用 $(document).ready(function(){}); 执行命令，例如

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

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