JSNI（GWT-GWTP）：就緒事件觸發后，jQuery未在“文檔就緒”功能中選擇節點

Question

我試圖基於其CSS ID選擇一個div節點，並更改div的文本，全部使用jQuery （2.2.0）。 我的問題是jQuery選擇似乎從未正常發生？

• 那個jQuery選擇代碼（在下面，我使用'$'表示'jquery'fucntion的簡寫形式）在標准的“ document ready ”回調函數中，因此具有CSS ID的div被“確定地”確保在DOM中在回調被調用時。 該js代碼及其標准JSNI $ wnd語法類似於JSNI GWT jquery的答案。
• 所有這些jQuery js都在GWT JSNI本機方法（GWT 2.7.0）中。
• 我的項目是GWTP （1.5.1）項目。
• 所有觀察結果均通過生產模式和開發模式在不同的瀏覽器中復制。

我將從這段代碼中解釋如何確認JSNI本機方法renderTree（）被調用，'document ready'事件觸發以及CSS ID為div的DOM中 ...

public native void renderTree()/*-{
    $wnd.alert("renderTree");

    $wnd.$($doc).ready(function() {     
        $wnd.alert("DOM ready!");

        $wnd.$('#gramTree').text("text changed from JSNI jQuery");
    });
}-*/;

1. 我從GWT View類的構造函數中調用了renderTree（）（更具體地說，它是GWTP擴展的ViewWithUiHandlers ）
2. 當加載View的頁面時，“ renderTree”會在警報窗口中彈出：這證明了我打算在調用renderTree（）JSNI方法時，因為renderTree的第一行是$ wnd.alert。
3. 緊接着，“ DOM准備就緒！” 在警報窗口中彈出：證明“文檔就緒”事件已觸發，並且其回調稱為 。 這是因為該回調也已在renderTree（）JSNI中注冊到該事件，並且回調的第一行是$ wnd.alert。

4. 到目前為止，是1.-3。 所有操作均按預期發生... 但是jQuery $ #gramTree的選擇似乎從未發生 ，因為具有該ID的div的文本永遠不會更改為“文本從JSNI jQuery更改”（其文本最初從UiBinder加載為“從UiBinder初始化的文本”，並保持這種狀態）。

   • 我希望選擇應該發生，因為它是'document ready'回調中的第二行，並且3.證明了該回調已被調用。
   • ID為#gramTree的div肯定在DOM中，因為我可以在瀏覽器檢查器中看到它，並且可以看到其初始文本（“從UiBinder初始化的文本”）已呈現。 該初始文本應該從“文檔就緒”回調更改為“從JSNI jQuery更改文本”。 div，其CSS ID和其初始文本在GWT UiBinder中為我的視圖聲明。

5. 我可以在此時手動更改文本，方法是在瀏覽器控制台上手動輸入在回調中似乎無效的jQuery代碼行（ $('#gramTree').text("text changed from JSNI jQuery"); ）。 同樣，我也可以通過對renderTree（）進行編碼以使其也從頁面上的按鈕的click事件中調用，然后手動單擊該按鈕來使其手動工作。

任何想法出什么問題了嗎？

通過有根據的猜測，給定4.-5。，似乎“文檔准備就緒”事件無法正常工作，或者我該如何處理？

有什么想法需要進一步檢查嗎？

謝謝！

Answer 1

您應該依靠View Lifecycle來確保它已附加到DOM。 來自GWTP ViewImpl#onAttach doc

視圖附加到DOM后調用的方法。 您應該重寫此方法，以執行需要執行的與ui相關的所有初始化，該初始化需要在附加視圖且演示者不必知道之后進行（例如，附加事件處理程序）

在您的情況下，當$wnd.$('#gramTree').text("text changed from JSNI jQuery"); 被稱為#gramTree元素未附加到DOM，並且對jQuery不可見。

Answer 2

我自己將此答案發布為可以在其他地方找到的可食用的東西（有點黑）：從Deferred ScheduledCommand調用JSNI renderTree（）方法。

似乎我要開始使用的“准備文檔”方法將是真正的規范/預定方法。 所以我寧願找出來...