Question

我的javascript文件中包含以下内容：

var divId = "divIDer";

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

html看起来像：

<div id="divIDer"><div>

但有时候我的divIder实际加载到页面之前会调用我的createGrid（）函数。那么当我尝试渲染我的网格时，它找不到适当的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事件的唯一方法，例如插入或修改 Elements ，就是使用这样的 Mutation Events 。例如

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

进一步阅读：MDN

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

Mutation Events 的官方替换是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(function() {
    createGrid();
});

如果您不使用AJAX加载div

，则会出现这种情况

Answer 5

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

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

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

，这是合适的

Answer 6

我们可以通过setTimeout or requestAnimationFrame

来完成

jQuery(document).ready(checkContainer);

使用setTimeout

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

或使用window.requestAnimationFrame（推荐）

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

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

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

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

6 个答案: