jQuery div准备好后如何调用函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17071697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call a function after a div is ready?
提问by Grammin
I have the following in my javascript file:
我的 javascript 文件中有以下内容：
var divId = "divIDer";
jQuery(divId).ready(function() {
createGrid(); //Adds a grid to the html
});
The html looks something like:
html 看起来像：
<div id="divIDer"><div>
But sometimes my createGrid() function gets called before my divIder is actually loaded onto the page. So then when I try to render my grid it can't find the proper div to point to and doesn't ever render. How can I call a function after my div is completely ready to be used?
但有时我的 createGrid() 函数在我的 divIder 实际加载到页面之前被调用。所以当我尝试渲染我的网格时，它找不到合适的 div 指向并且永远不会渲染。在我的 div 完全可以使用后，如何调用函数？
Edit:
编辑：
I'm loading in the div using Extjs:
我正在使用 Extjs 在 div 中加载：
var tpl = new Ext.XTemplate(
'<div id="{divId}"></div>');
tpl.apply({
});
回答by Matthew Blancarte
You can use recursion here to do this. For example:
您可以在此处使用递归来执行此操作。例如：
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
}
}
Basically, this function will check to make sure that the element exists and is visible. If it is, it will run your createGrid()function. If not, it will wait 50ms and try again.
基本上，此函数将检查以确保元素存在且可见。如果是，它将运行您的createGrid()函数。如果没有，它将等待 50 毫秒，然后重试。
Note:: Ideally, you would just use the callback function of your AJAX call to know when the container was appended, but this is a brute force, standalone approach. :)
注意:: 理想情况下，您只需使用 AJAX 调用的回调函数来了解容器何时被附加，但这是一种蛮力的独立方法。:)
回答by jAndy
Thus far, the only way to "listen" on DOM events, like inserting or modifying Elements, was to use the such called Mutation Events. For instance
到目前为止，“侦听” 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);
Further reading on that: MDN
进一步阅读：MDN
The Problem with Mutation Eventswas (is) they never really made their way into any official spec because of inconcistencies and stuff. After a while, this events were implemented in all modern browser, but they were declared as deprecated, in other words you don't want to use them.
突变事件的问题是（是）由于不一致和其他原因，它们从未真正进入任何官方规范。过了一段时间，这个事件在所有现代浏览器中都实现了，但它们被声明为deprecated，换句话说，你不想使用它们。
The official replacementfor the Mutation Eventsis the MutationObserver()object.
该负责人更换的突变事件是MutationObserver()对象。
Further reading on that: MDN
进一步阅读：MDN
The syntax at present looks like
目前的语法看起来像
var observer = new MutationObserver(function( mutations ) {
mutations.forEach(function( mutation ) {
console.log( mutation.type );
});
});
var config = { childList: true };
observer.observe( document.body, config );
At this time, the API has been implemented in newer Firefox, Chrome and Safari versions. I'm not sure about IE and Opera. So the tradeoff here is definitely that you can only target for topnotch browsers.
目前，该 API 已在较新的 Firefox、Chrome 和 Safari 版本中实现。我不确定 IE 和 Opera。所以这里的权衡肯定是你只能针对顶级浏览器。
回答by Mohamad Osama
To do something after certain div load from function .load().
I think this exactly what you need:
在从 function 加载某些 div 之后做一些事情.load()。我认为这正是您所需要的：
$('#divIDer').load(document.URL + ' #divIDer',function() {
// call here what you want .....
//example
$('#mydata').show();
});
回答by Pavel Gruba
Through jQuery.ready function you can specify function that's executed when DOM is loaded. Whole DOM, not any div you want.
通过 jQuery.ready 函数，您可以指定在加载 DOM 时执行的函数。整个 DOM，而不是您想要的任何 div。
So, you should use ready in a bit different way
所以，你应该以不同的方式使用 ready
$.ready(function() {
createGrid();
});
This is in case when you dont use AJAX to load your div
这是在您不使用 AJAX 加载 div 的情况下
回答by dr.Crow
inside your <div></div>element you can call the $(document).ready(function(){});execute a command, something like
在您的<div></div>元素中，您可以调用$(document).ready(function(){});执行命令，例如
<div id="div1">
<script>
$(document).ready(function(){
//do something
});
</script>
</div>
and you can do the same to other divs that you have. this was suitable if you loading your div via partial view
你可以对你拥有的其他 div 做同样的事情。如果您通过局部视图加载 div，这很合适
