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

我在我的JavaScript文件如下：如何在div准备好后调用函数？

var divId = "divIDer"; 

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

的HTML看起来像：

<div id="divIDer"><div>

但有时实际被加载到页面上，我的分频器之前我createGrid（）函数被调用。那么当我尝试呈现我的网格时，它无法找到指向的合适div并且不会呈现。我的div完全可以使用后，如何调用函数？

编辑：

我使用ExtJS的加载在div：

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

tpl.apply({ 

});

来源

2013-06-12 Grammin

如何加载你的div？使用ajax？ –

DIVs没有准备好的事件 –

我想''jQuery（divId）'从来没有找到任何东西，你错过了ID选择器'＃' – tymeJV

您可以使用递归来这里做这个使用做好准备。例如：

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

来源

2013-06-12 17:42:33

我加载了iframe上的五个页面上一个，其中一个页面是谷歌地图地理编码，我打电话功能on window onload geocode地址，但该函数在iframe中第一页加载时触发，我尝试了document.ready，wind.load，if（$（div）.is（：visible）），但是每一件事都在第一页触发加载在iframe上，当我们点击下3次然后googlemap转过来时googlemap是在第三位！ - –

嘿@Mohit，我认为最好能让你真的在新的问题中展示你的代码。评论背景下太难遵守。如果你在这里链接你的新问题，我会遵循它，看看我能否提供帮助。 :) –

至此， “听” 上DOM事件，如插入或修改元素的唯一途径，就是用这种叫做的突变事件。例如

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

进一步阅读上：MDN

与突变事件问题是（是），他们从来就不是他们的方式进入，因为inconcistencies和材料的任何官方规格。过了一段时间，这个事件在所有现代浏览器中都实现了，但是他们被宣布为弃用，换句话说你不想使用它们。

官方更换为突变事件是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。所以这里的权衡是绝对的，你只能针对topnotch浏览器。

来源

2013-06-12 17:36:42 jAndy

我真的觉得更多的人应该使用这个，尤其重要的是，当涉及到ajax调用 –

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

所以，你应该有点不同的方式

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

这是在情况下，当你不使用AJAX来加载DIV

来源

2013-06-12 17:37:48

您<div></div>元素里，你可以调用$(document).ready(function(){});执行命令，像

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

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

来源

2016-06-09 09:07:06

这是一个正义的黑客。我认为你没有保修。我正在使用这个。 –

在功能的某些div加载后做些什么。我认为这正是你需要的：

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

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


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

来源

2018-01-10 14:15:01

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

回答

相关问题