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

Question

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

var divId = "divIDer";

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

html看起来像:

<div id="divIDer"><div>

但有时我的divGrid函数会在我的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()功能.如果没有,它将等待50ms并再试一次.

注意::理想情况下,您只需使用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

突变事件的问题是由于不一致和事情,他们从未真正进入任何官方规范.一段时间后,这些事件在所有现代浏览器中实现,但它们被声明为已弃用,换句话说,您不想使用它们.

该负责人更换的突变事件是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.所以这里的权衡肯定是你只能针对一流的浏览器.