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

JSNI (GWT-GWTP): jQuery does not select node in 'document ready' function after ready event fires

本文关键字:就绪 文档就绪 文档 节点 选择 函数 GWT-GWTP jQuery JSNI 事件      更新时间:2023-09-26

我正在尝试根据其CSS ID选择一个div节点,并更改div的文本,所有这些都使用jQuery(2.2.0(。 我的问题是jQuery选择似乎永远不会正常发生?

  • jQuery选择代码(下面,我使用"$"简写的"jquery"功能(位于标准的"文档就绪"回调函数中,因此具有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");
    });
}-*/;
  1. 我从GWT View类的构造函数中调用该renderTree(((更具体地说,它是一个GWTP扩展的ViewWithUiHandlers(。
  2. 当视图的页面加载时,"renderTree"会在警报窗口中弹出:这证明renderTree((JSNI方法在我想要的时候被调用,因为renderTree的第一行是$wnd.alert。
  3. 紧接着,"DOM ready!"在一个警报窗口中弹出:这证明"文档就绪"事件被触发并调用其回调。 这是因为回调也在 renderTree(( JSNI 中注册到事件,而回调的第一行是 $wnd.alert
  4. 到目前为止,1.-3. 一切都按预期发生... 但是 jQuery $ 选择"#gramTree"似乎从未发生过,因为具有该 ID 的div 永远不会将其文本更改为"从 JSNI jQuery 更改的文本"(其文本最初从 UiBinder 加载为"从 UiBinder 初始化的文本",并保持这种状态(。

    • 我希望选择应该发生,因为它是"文档就绪"回调中的第二行,并且 3. 证明回调被调用。
    • ID 的div #gramTree 肯定在 DOM 中,因为我可以在浏览器检查器中看到它,并且我可以看到它的初始文本("从 UiBinder 初始化的文本"(呈现。 该初始文本应该从"文档就绪"回调更改为"从JSNI jQuery更改的文本"。div、它的 CSS ID 和它的初始文本在 GWT UiBinder for My View 中声明。
  5. 此时,我可以通过在浏览器控制台上手动输入似乎无法从回调($('#gramTree').text("text changed from JSNI jQuery");(中不起作用的jQuery代码行来手动获取要更改的文本。 同样,我也可以通过编码 renderTree(( 从页面上按钮的单击事件调用,并在此时手动单击该按钮来使其手动工作。

任何想法这里出了什么问题?

根据有根据的猜测,给定 4.-5.,"文档就绪"事件似乎有些不正常,或者我如何处理它?

有什么想法要进一步检查吗?

谢谢!

您应该依赖视图生命周期以确保它附加到 DOM。 来自 GWTP ViewImpl#onAttach文档

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

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

自己发布这个答案作为我在其他地方发现的思考食物(它是黑客的(:从延迟调度命令调用 JSNI renderTree(( 方法。

似乎我正在尝试工作的"文档就绪"方法将是真正的规范/预期方法。 所以我宁愿弄清楚...