JQuery元素選擇器不工作與GWT生成的HTML

我試圖將jQuery Masonry庫與我的GWT項目集成。但是我不能讓庫使用GWT生成的容器和元素。但是，如果我直接在HTML頁面中重寫生成的GWT HTML，它確實有效。JQuery元素選擇器不工作與GWT生成的HTML

這是我的GWT入口點看起來像

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

    } 
}

我也有一個CSS文件中聲明是這樣的：

#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？

來源

2012-07-08 Bartzilla

在文檔準備的入口點的時間尚未執行。所以DOM還沒有。

爲了避免這個問題，你可以使用GWTQuery來代替或者從gwt調用你的DOM更新信號。這將是這個樣子：

的JavaScript：

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

GWT：

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

來源

2012-07-08 18:29:45

看起來像document.ready上還沒有＃content-tag。試着在那裏停止程序（調試器？），並檢查以HTML生成的內容。

可能是因爲現成的事件也是GWT產生的JavaScript的起點，然後將ID以後可以設置:)

來源

2012-07-08 15:26:45 Johan

有時候這工作。

$(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"]'); 
}

來源

2013-04-16 21:16:30 EmHonaise

JQuery元素選擇器不工作與GWT生成的HTML

回答

相關問題