주어진 DOM 요소가 준비되어 있는지 확인하십시오.

주어진 선택기/요소에 대한 HTML DOM 요소가 jQuery 또는 JavaScript를 사용하여 아직 준비가되었는지 확인하는 방법이 있습니까?주어진 DOM 요소가 준비되어 있는지 확인하십시오.

준비 기능을 위해 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 요소에 특정 코드는 전체 문서 후에 실행할 경우에는 실제로 이전 실행할 수에도 불구하고 준비가되어 있었다.

출처

2011-07-04 8bitme

왜 문서가 준비보다 먼저 그것을 실행하려는 수행하십시오 dom이 존재하고 약속에 해결 기능을 수행 할 때까지

꽤 많이 기다리고 있습니다? – nWorx

내가 왜 물어 봐도 될까요? 왜 이걸 필요로합니까? –

일반적으로 자바 스크립트 실행은 다른 콘텐츠의로드를 차단하기 때문에 스크립트를 실행하는 것이 가능한 한 빨리 실행하는 것이 웹 사이트의 전반적인 성능을 향상시킬 것이라고 생각하지 않습니다. 가장 좋은 방법은'$ (document) .ready'를 사용하는 것입니다. – FishBasketGordo

편집 2012 live 메서드는 jQuery 1.7.0부터 사용되지 않습니다. 이제 이벤트 처리기를 연결하는 경우 .on() event을 사용하는 것이 좋습니다. 이것은 .bind(), .delegate() 및 .live()를 대체합니다. http://api.jquery.com/on/

원래 대답 내가 jQuery .live() event 당신이 찾고있는 것 같아요

는 문서를 참조하십시오.

출처

2011-07-04 13:07:56 Tsar

이것은 대답이 아니며 문서에 대한 링크입니다. . 당신이 대답하고 싶지 않다면 당신은 코멘트에 링크를 넣을 수 있습니다. – user3738936

대답은 아마도 아니오입니다. 브라우저의 관점에서 볼 때 이는 아마도 나쁜 설계이며 이와 같은 것을 허용하지 못할 수도 있습니다.

DOM을 준비한 후에 동적으로 삽입 된 요소에는 사용할 수있는 DOM 이벤트 DOMNodeInserted가 있습니다. 아마 같은 이벤트를 사용하는 위에서 언급 한 jquery 라이브를 사용할 수도 있습니다.

출처

2011-07-04 13:13:05

네, 가능합니다. 네이티브가 아니지만 구현하기가 쉽습니다. 찾고자하는 노드가 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>

출처

2014-04-30 22:29:06 Ansikt

다음 코드는 나를 위해 일했습니다!

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

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

출처

2015-10-30 13:58:00

-------- 2016 --------

나는 어쩌면 다른 사람 도움이 될 수 있습니다 약속을 사용하여 가능한 솔루션과 함께

, 내가 jquery 원인을 사용하고 I 게으른 분 : P.

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

출처

2016-06-29 00:34:17 ncubica

DOM에서 요소가 사라졌지 만 나중에 다시 나타날 수있는 요소는 어떻습니까? 어떻게 나는 이것을 붙잡을 까? – paskl

주어진 DOM 요소가 준비되어 있는지 확인하십시오.

답변

관련 문제