JQuery 요소 선택기가 GWT와 작동하지 않음 HTML

Question

jQuery Masonry 라이브러리를 내 GWT 프로젝트에 통합하려고합니다. 그러나 GWT에 의해 생성 된 컨테이너 및 요소를 사용하여 라이브러리를 작동하도록 만들 수는 없습니다. 그러나 생성 된 GWT HTML을 HTML 페이지에서 직접 다시 작성하면 작동합니다.

이 내 GWT EntryPoint를 어떻게 보이는지 나는 또한 CSS 파일은 다음과 같이 선언

public class Sample implements EntryPoint { 

    //In here the text has random lengths to achieve different div blocks to work with Masonry 
    private HTML label1 = new HTML("Text.."); 
    private HTML label2 = new HTML("Text.."); 
    private HTML label3 = new HTML("Text.."); 
    private HTML label4 = new HTML("Text.."); 
    private Image image1 = new Image("images/samsung.jpg"); 
    private AbsolutePanel hPanel = new AbsolutePanel(); 

    public void onModuleLoad() { 

     DOM.setElementAttribute(hPanel.getElement(), "id", "content"); 
     image1.setSize("230px", "400px"); 
     HTML html = new HTML(image1.toString()); 
     html.setStyleName("item"); 
     hPanel.add(html); 

     label1.setStyleName("item"); 
     hPanel.add(label1); 

     label2.setStyleName("item"); 
     hPanel.add(label2); 

     label3.setStyleName("item"); 
     hPanel.add(label3); 

     label4.setStyleName("item"); 
     hPanel.add(label4); 

     RootPanel.get("wrapper").add(hPanel); 

    } 
} 

같은 :

#wrapper{ 
    margin: 0 auto; 
    width: 1000px; 
} 

.item{ 
    padding: 10px 10px; 
    width:230px; 
    float: left; 
} 

이 다음 HTML 코드를 생성

<div id="wrapper"> 
      <div id="header"> 
       <h1>JQuery, Masonry, GWT, GQuery Test</h1> 
      </div> 

     <div style="position: relative; overflow: hidden;" id="content"> 
      <div class="item"> 
       <img src="images/samsung.jpg" class="gwt-Image" 
        style="width: 230px; height: 400px;"> 
      </div> 
      <div class="item" style=""> 
       Text 
      </div> 
      <div class="item">text</div> 
      <div class="item" style="">text</div> 
      <div class="item"><img src="images/samsung.jpg" class="gwt-Image" 
        style="width: 230px; height: 400px;"> 
      </div> 
      <div class="item">text</div> 
     </div> 
    </div> 

을 그리고 마지막으로 내 HTML 페이지에서 다음과 같은 jQuery 호출이 있습니다.

<script type="text/javascript" charset="UTF-8" language="javascript" 
src="scripts/jquery-1.7.2.min.js"></script> 

     <script type="text/javascript" charset="UTF-8" language="javascript" 
src="scripts/jquery.masonry.js"></script> 

    <script type="text/javascript" charset="UTF-8"> 

    $(document).ready(function(){  

     $('#content').masonry(); 
    }); 
</script> 

이 GWT 응용 프로그램을 실행할 때 Masonry 라이브러리가 작동하지 않고 예상 출력을 렌더링하지 않습니다. 그러나 GWT에서 생성 된 HTML을 복사하여 HTML 페이지에 직접 붙여 넣으면 라이브러리가 올바르게 작동하고 예상되는 출력이 렌더링됩니다.

나는 벽돌집 웹 사이트 http://masonry.desandro.com/docs/intro.html에서이 자습서를 따라 갔다. 누군가가 GWT가 HTML을 생성 할 때 왜 작동하지 않는지 이유가 무엇인지 지적 할 수 있습니까?

Answer 1

준비 문서 진입 점의 시점에서 아직 실행되지 않았 음을 수 있을까 . 따라서 DOM은 아직 존재하지 않습니다.

이 문제를 피하려면 대신 GWTQuery를 사용하거나 DOM 업데이트를 알리는 gwt에서 javascript를 호출하면됩니다.

자바 스크립트 :

function domUpdated(){ 
    //do you jquery stuff here... 
} 

GWT :

private native void tellJavascriptWeAreDone()/*-{ 
    $wnd.domUpdated(); 
}-*/; 

Answer 2

# content-tag가 document.ready에 아직없는 것 같습니다. 프로그램을 멈추고 (디버거?) HTML로 생성 된 내용을 확인하십시오.

는 준비 이벤트는 GWT는 생성 된 자바 스크립트의 시작 지점입니다, 다음 ID가 나중에 설정할 수 있습니다 :

Answer 3

때때로이 작품이 다음과 같이 보일 것입니다.

$(window).load(function() { 
     // executes when complete page is fully loaded 
     //including all frames, objects and images 
     var class1 = $('textarea[name="class1_members"]'); 
     var class0 = $('textarea[name="class0_members"]'); 
}