Проверьте, готов ли данный элемент DOM

Есть ли способ проверить, готовы ли элементы 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, будет выполняться только после того, как весь документ будет готов, даже если он действительно может выполнить ранее.

Ответ 1

Изменить 2012 Метод live устарел из jQuery 1.7.0. . On() событие теперь рекомендуется для привязки обработчиков событий. Это заменяет .bind(),.delegate() и .live().

См. документы: http://api.jquery.com/on/

Оригинальный ответ

Я думаю, jQuery.live() событие может быть тем, что вы ищете.

Ответ 2

Да, это возможно: и хотя он не является родным, его довольно легко внедрить. Просто вызовите пользовательское событие после того, как 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>

Ответ 3

Ответ, вероятно, нет. с точки зрения браузера это, вероятно, плохой дизайн и, возможно, даже невозможно позволить что-то вроде этого.

для динамически вставленных элементов после готовности DOM есть событие dom - DOMNodeInserted - которое вы можете использовать. вы также можете использовать jquery live, как указано выше, что, вероятно, использует одно и то же событие.

Ответ 4

-------- 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
})

Ответ 5

Для меня работал фрагмент кода

<print condition="true"></print> 

   <script>
    $('print').load('#',function(){
        alert($(this).attr('condition')); 
     });
   </script>