java - JQuery 元素选择器不适用于 GET 生成的 HTML

Question

我正在尝试整合 jQuery Masonry我的 GWT 项目的库。但是我无法使库与 GWT 生成的容器和元素一起使用。但如果我直接在我的 HTML 页面中重写生成的 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 页面时，该库将正常工作并呈现预期的输出。

我在 Masonry 网站上学习了这个教程 http://masonry.desandro.com/docs/intro.html .有人能指出我这不适用于 GWT 生成的 HTML 的原因是什么吗？？

Answer 1

在您准备好文档时，入口点尚未执行。所以 DOM 还不存在。

为避免此问题，您可以改用 GWTQuery 或从 gwt 调用 javascript 以通知您的 DOM 更新。这看起来像这样:

JavaScript:

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

GWT:

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