檢查給定的DOM元素是否准備就緒
[英]Check if a given DOM element is ready
問題描述
有沒有辦法檢查給定選擇器/元素的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元素的代碼將僅在整個文檔准備好之后執行，即使它實際上可以更早地執行。
5 個解決方案
解決方案1
6 已采納 2011-07-04 13:07:56
編輯2012自jQuery 1.7.0起，不推薦使用live方法。 現在建議使用.on（）事件來附加事件處理程序。 這取代了.bind（）,. delegate（）和.live（）。
請參閱文檔： http ： //api.jquery.com/on/
原始答案
我認為jQuery .live（）事件可能就是你要找的東西。
解決方案2
4 2014-04-30 22:29:06
是的，它是可能的：雖然它不是原生的，但它很容易被恭維。 只需在您要查找的節點加載到DOM后觸發自定義事件。
注意：我在jQuery中寫這個，這意味着你必須在加載過程的早期包含jQuery，這是一個不可行的性能。 話雖這么說，如果你已經在你的文檔中高高舉起jQuery，或者你的DOM構建需要很長時間，那么這可能是值得的。 否則，你可以在vanilla JS中自由編寫這個以跳過$ dependency。
<!DOCTYPE HTML>
<html><head><title>Incremental DOM Readyness Test</title></head><body>
<script src="/js/jquery.js"></script>
<script>
jQuery(document.body).on("DOMReady", "#header", function(e){
var $header = jQuery(this);
$header.css({"background-color" : "tomato"});
}).on("DOMReady", "#content", function(e){
var $content = jQuery(this);
$content.css({"background-color" : "olive"});
});
</script>
<div class="header" id="header">
<!-- Header stuff -->
</div>
<script>jQuery("#header").trigger("DOMReady");</script>
<div class="content" id="content">
<!-- Body content. Whatever is in here is probably really slow if you need to do this. -->
</div>
<script>jQuery("#content").trigger("DOMReady");</script>
</body></html>
解決方案3
2 2016-06-29 00:34:17
-------- 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
})
解決方案4
1 2011-07-04 13:13:05
答案可能是否定的。 從瀏覽器的角度來看，它可能是一個糟糕的設計，甚至可能不允許這樣的東西。
對於DOM准備好后動態插入的元素，可以使用dom事件 - DOMNodeInserted。 您也可以使用上面提到的jquery live，它可能使用相同的事件。
解決方案5
0 2015-10-30 13:58:00
以下一段代碼為我工作！
<print condition="true"></print>
<script>
$('print').load('#',function(){
alert($(this).attr('condition'));
});
</script>
$（document）.ready（）中的函數未找到DOM的主體元素
[英]function in $(document).ready() not finding body element of DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.