检查给定的DOM元素是否准备就绪

有没有办法检查给定选择器/元素的HTML DOM元素是否已准备好使用jQuery或JavaScript？

查看jQuery api的ready函数，看起来它只能与文档对象一起使用。 如果准备好不能用于此目的还有另一种方法吗？

例如

$('h1').ready(function() { //do something when all h1 elements are ready }); 

显然我可以使用

 $(document).ready(function() { //do something when all h1 elements are ready }); 

但是如果首先加载所有h1，那么特定于h1元素的代码将仅在整个文档准备好之后执行，即使它实际上可以更早地执行。

Answer 1

编辑2012自jQuery 1.7.0起，不推荐使用live方法。 现在建议使用.on（）事件来附加事件处理程序。 这将替换.bind（）,. delegate（）和.live（）。

请参阅文档： http ： //api.jquery.com/on/

---

原始答案

我认为jQuery .live（）事件可能就是你要找的东西。

Answer 2

是的，它是可能的：虽然它不是原生的，但它很容易被恭维。 只需在您要查找的节点加载到DOM后触发自定义事件。

注意：我在jQuery中写这个，这意味着你必须在加载过程的早期包含jQuery，这是一个不可行的性能。 话虽这么说，如果你已经在你的文档中高高举起jQuery，或者你的DOM构建需要很长时间，那么这可能是值得的。 否则，你可以在vanilla JS中自由编写这个以跳过$ dependency。

Answer 3

答案可能是否定的。 从浏览器的角度来看，它可能是一个糟糕的设计，甚至可能不允许这样的东西。

对于DOM准备好后动态插入的元素，可以使用dom事件 – DOMNodeInserted。 您也可以使用上面提到的jquery live，它可能使用相同的事件。

Answer 4

——– 2016 ——–

我带来了一个可能的解决方案，使用可能可以帮助其他人的承诺，我使用jquery因为我很懒：P。

几乎等到dom存在然后在promise中执行resolve函数：

 var onDomIsRendered = function(domString) { return new Promise(function(resolve, reject) { function waitUntil() { setTimeout(function() { if($(domString).length > 0){ resolve($(domString)); }else { waitUntil(); } }, 100); } //start the loop waitUntil(); }); }; //then you can use it like onDomIsRendered(".your-class-or-id").then(function(element){ console.log(element); //your element is ready }) 

Answer 5

以下代码为我工作！