25

我的 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({

});
4

5 回答 5

38

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

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 调用的回调函数来了解容器何时被附加，但这是一种蛮力的独立方法。:)

于 2013-06-12T17:42:33.163 回答
8

到目前为止，“监听” DOM 事件的唯一方法，比如插入或修改元素，是使用所谓的突变事件。例如

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。所以这里的权衡绝对是你只能针对顶级浏览器。

于 2013-06-12T17:36:42.243 回答
4

在从 function 加载某些 div 之后做某事.load()。我认为这正是您所需要的：

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

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


       //example
       $('#mydata').show();
  });
于 2018-01-10T14:15:01.793 回答
1

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

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

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

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

于 2013-06-12T17:37:48.953 回答
1

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

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

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

于 2016-06-09T09:07:06.157 回答