Есть ли способ проверить, готовы ли элементы HTML/DOM для данного селектора/элемента, используя jQuery или JavaScript?
Глядя на jQuery api для функции готовности, похоже, что он может использоваться только с объектом документа. Если готовый не может быть использован для этой цели, есть ли другой способ сделать это?
например.
$('h1').ready(function()
{
//do something when all h1 elements are ready
});
Очевидно, я мог бы использовать
$(document).ready(function()
{
//do something when all h1 elements are ready
});
Но если вся загрузка h1 сначала, то код, специфичный для элементов h1, будет выполняться только после того, как весь документ будет готов, даже если он действительно может выполнить ранее.
Изменить 2012
Метод live устарел из jQuery 1.7.0. . On() событие теперь рекомендуется для привязки обработчиков событий. Это заменяет .bind(),.delegate() и .live().
См. документы: http://api.jquery.com/on/
Оригинальный ответ
Я думаю, jQuery.live() событие может быть тем, что вы ищете.
Да, это возможно: и хотя он не является родным, его довольно легко внедрить. Просто вызовите пользовательское событие после того, как node, который вы ищете, загружается в DOM.
Примечание. Я пишу это в jQuery, а это значит, что вам нужно включить jQuery в начале процесса загрузки, что не так уж и плохо. При этом, если у вас уже есть jQuery высоко в вашем документе, или если DOM-конструкция принимает для вас долгое время, это может быть полезно. В противном случае вы можете написать это в vanilla JS, чтобы пропустить зависимость $.
<!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>
Ответ, вероятно, нет. с точки зрения браузера это, вероятно, плохой дизайн и, возможно, даже невозможно позволить что-то вроде этого.
для динамически вставленных элементов после готовности DOM есть событие dom - DOMNodeInserted - которое вы можете использовать. вы также можете использовать jquery live, как указано выше, что, вероятно, использует одно и то же событие.
-------- 2016 --------
Я пришел с возможным решением, используя promises, который может помочь кому-то другому, я использую jquery, потому что я ленив: P.
Довольно много ждет, пока существует dom, а затем выполните функцию разрешения в обещании:
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
})
Для меня работал фрагмент кода
<print condition="true"></print>
<script>
$('print').load('#',function(){
alert($(this).attr('condition'));
});
</script>