JSNI (GWT-GWTP)：在就绪事件触发后，jQuery 不会在“文档就绪”函数中选择节点答案

【问题标题】：JSNI (GWT-GWTP): jQuery does not select node in 'document ready' function after ready event firesJSNI (GWT-GWTP)：在就绪事件触发后，jQuery 不会在“文档就绪”函数中选择节点
【发布时间】：2016-02-14 02:22:30
【问题描述】：

我正在尝试根据其 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()，触发了“文档就绪”事件，并且带有 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");
    });
}-*/;

我从 GWT 视图类的构造函数中调用该 renderTree()（更具体地说，它是 GWTP 扩展的 ViewWithUiHandlers）
当视图的页面加载时，“renderTree”会在警报窗口中弹出：这证明 renderTree() JSNI 方法在我打算调用时被调用，因为 renderTree 的第一行是 $wnd.alert。
紧接着，“DOM 准备就绪！”在警报窗口中弹出：这证明 'document ready' 事件已触发并且它的回调被调用。那是因为回调也是在 renderTree() JSNI 中注册到事件的，回调的第一行是 $wnd.alert
到目前为止，1.-3。一切都按预期发生... 但 '#gramTree' 的 jQuery $ 选择似乎从未发生过，因为具有该 ID 的 div 的文本从未更改为“从 JSNI jQuery 更改的文本”（其最初从 UiBinder 加载的文本为“从 UiBinder 初始化的文本”，并保持这种状态）。
- 我希望选择应该发生，因为它是“文档就绪”回调中的第二行，并且 3. 证明回调已被调用。
- ID 为 #gramTree 的 div 肯定在 DOM 中，因为我可以在浏览器检查器中看到它，并且我可以看到它的初始文本（“从 UiBinder 初始化的文本”）呈现。该初始文本应该从“文档就绪”回调中更改为“从 JSNI jQuery 更改的文本”。 div、它的 CSS ID 和它的初始文本在我的视图的 GWT UiBinder 中声明。
此时我可以通过在浏览器控制台上手动输入似乎无法通过回调 ($('#gramTree').text("text changed from JSNI jQuery");) 工作的 jQuery 代码行来手动获取要更改的文本。同样，我也可以通过编码 renderTree() 以从页面上的按钮的单击事件中调用，并在此时手动单击该按钮，从而使其手动工作。

有什么想法吗？

根据有根据的猜测，给定 4.-5.，“文档准备就绪”事件或我如何处理它？

有什么想法可以进一步检查吗？

谢谢！

【问题讨论】：

正如在此接受的那样，@hahn 的答案中的 cmets 指出 GWTP 延迟加载意味着 DOM 可以在所有视图/演示者加载之前准备好。

标签： javascript jquery gwt jsni gwtp

【解决方案1】：

您应该依赖 View Lifecycle 以确保它附加到 DOM。来自 GWTP ViewImpl#onAttach doc

在视图附加到 DOM 后调用的方法。你应该重写此方法以执行任何与 ui 相关的初始化需要在附加视图并且演示者不必知道（附加事件处理程序实例）

在您的情况下，当调用 $wnd.$('#gramTree').text("text changed from JSNI jQuery"); 时，#gramTree 元素未附加到 DOM 并且对 jQuery 不可见。

【讨论】：

酷这个工作，谢谢。你提到的生命周期和这个（dev.arcbees.com/gwtp/core/presenters/lifecycle.html）一样吗？知道这与 Deferred ScheduledCommand 有何不同（请参阅我的其他答案）？ onAttach 和浏览器事件循环返回之间的关系可能吗？
也很好奇为什么 $wnd.$($doc).ready(function() { 从来没有工作过......我实际上已经用你的解决方案完全删除了它。
视图和演示者有不同的生命周期钩子。 Scheduler#scheduleDeferred 和 js 中的 setTimeout 一样。基本上，这是可行的，因为命令的执行被推迟并在#onAttach 之后执行。 $.ready 仅在 DOM 初始就绪后执行一次。
"$.ready 只执行一次，在 DOM 初始就绪之后。"那么 DOM 可以在所有元素都附加之前就准备好了？
@cellepo 好吧，当 DOM 准备好时，GWTP 仍然可以加载.. 由于演示者和视图在 GWTP 中是惰性的，它们可能会在一段时间后被初始化..

【解决方案2】：

我自己发布这个答案作为我在其他地方发现的思考的食物（这很骇人听闻）：从Deferred ScheduledCommand 调用 JSNI renderTree() 方法。

似乎我试图开始工作的“文档准备就绪”方法将是真正的规范/预期方式。所以我宁愿弄清楚这一点......

【讨论】：