JSNI（GWT-GWTP）：在ready事件触发后，jQuery在'document ready'函数中不选择节点 [英] JSNI (GWT-GWTP): jQuery does not select node in 'document ready' function after ready event fires

问题描述

我试图根据CSS ID选择div节点，并更改div的文本，全部使用 jQuery （2.2.0）。我的问题是， jQuery选择从来没有出现过正常情况？

• jQuery选择代码（下面， ''jquery'fucntion 使用'$'简写）在标准范围内< document ready '回调函数，以便CSS ID的div是假定确保在回调被调用时在DOM中。该js代码及其标准的JSNI $ wnd语法类似于 JSNI GWT jquery 中的答案。 li>
  
• 所有这些jQuery js都位于 GWT中JSNI 本地方法（GWT 2.7.0）。


• 我的项目是一个 GWTP （1.5.1）项目。 所有观察结果都在不同的浏览器中以及生产模式和开发模式下重现。

我会从这段代码中解释我如何确认JSSI本地方法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 ready！弹出一个警告窗口：证明'文档就绪'事件触发，其回调称为。这是因为回调函数也在renderTree（）JSNI中注册了事件，回调函数的第一行是$ wnd.alert



4. 到目前为止，1.-3 。所有都按预期发生......但是jQuery $选择'#gramTree'似乎永远不会发生，因为具有该ID的div永远不会将其文本更改为文本已从JSNI jQuery更改（它的文本从UiBinder开始加载为从UiBinder初始化的文本，并保持这种状态）。

   
   
   
   
   
   • 我预计选择会发生，因为它是'document ready'回调中的第二行，以及3.证明回调被调用。
     
   • 带ID的div #gramTree肯定是在DOM中，因为我可以在浏览器检查器中看到它，我可以看到它的初始文本（从UiBinder初始化的文本）。原始文本是文档就绪回调中应该改为文本从JSNI jQuery改变的文本。 div，它的CSS ID和它的初始文本是在我的View的GWT UiBinder中声明的。
   
   



5. 我可以手动通过在浏览器控制台上手动输入jQuery代码行，从而在这一点上改变文本，该行看起来并不起作用（ $（'＃gramTree'）。text（text changed from JSNI jQuery的）; ）。同样，我也可以通过编写renderTree（）来从页面上的按钮的单击事件中进行调用，然后在此处手动单击该按钮，以手动工作。

任何想法在这里出了什么问题？
$ b

通过受过教育的猜测，给出了4.-5，有些事情对于'文档准备好'事件不适用，或者我如何处理它？<​​/ strong>

>解决方案

您应该依赖View Lifecycle来确保它已连接到DOM。来自GWTP ViewImpl＃onAttach doc

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

在你的情况下，当 $ wnd。$（'＃gramTree' ）.text（从JSNI jQuery改变的文本）; 被调用#gramTree元素没有附加到DOM，jQuery不可见。

I am trying to select a div node based on its CSS ID, and change the div's text, all with jQuery (2.2.0). My problem is that jQuery selection never seems to happen normally?

• That jQuery selection code (below, where I'm using the '$' shorthand for 'jquery' fucntion) is within a standard 'document ready' callback function so that the div with CSS ID is "supposedly" ensured to be in the DOM by the time the callback is called. That js code, and its standard JSNI $wnd syntax, resemble the Answers from JSNI GWT jquery.
• All of this jQuery js is within a GWT JSNI native method (GWT 2.7.0).
• My project is a GWTP (1.5.1) project.
• All observations are reproduced across different browser, and in both Production and Dev Modes.

I'll explain from this code how I have confirmed the JSNI native method renderTree() is called, the 'document ready' event fires, and the div with CSS ID is in the 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. I call that renderTree() from the constructor of a GWT View class (and more specifically, it is a GWTP-extended ViewWithUiHandlers)
2. When the View's page loads, "renderTree" pops up in an alert window: That proves renderTree() JSNI method is called when I intend, as renderTree's first line is that $wnd.alert.
3. Immediately after that, "DOM ready!" pops up in an alert window: That proves the 'document ready' event fires and its callback is called. That is because the callback is registered to the event also in renderTree() JSNI, and the callback's first line is that $wnd.alert

4. Up until now, 1.-3. all happen as expected... But the jQuery $ selection of '#gramTree' never seems to happen, as the div with that ID never has its text change to "text changed from JSNI jQuery" (its text loads from UiBinder initially as "text initialized from UiBinder", and stays that way).

   • I expected the selection should happen as it is the 2nd line in the 'document ready' callback, and 3. proved the callback is called.
   • div with ID #gramTree sure is in the DOM because I can see it in the browser inspector, and I can see its initial text ("text initialized from UiBinder") rendered. That initial text is what is supposed to change to "text changed from JSNI jQuery" from the 'document ready' callback. The div, its CSS ID, and its initial text are declared in the GWT UiBinder for my View.

5. I can manually get the text to change at this point by manually entering on the browser console the jQuery code line that does not seem to work from the callback ($('#gramTree').text("text changed from JSNI jQuery");). Similarly, I can also get it to manually work by coding renderTree() to call from the click event of a button also on the page, and manually clicking that button at this point.

Any ideas what is going wrong here?

It seems by educated guess, given 4.-5., that something isn't working right with the 'document ready' event, or how how I am handling it?

Any ideas of things to further check on?

Thanks!

解决方案

You should rely on View Lifecycle in order to be sure that it is attached to DOM. from GWTP ViewImpl#onAttach doc

Method called after the view is attached to the DOM. You should override this method to perform any ui related initialization that needs to be done after that the view is attached and that the presenter doesn't have to be aware of (attach event handlers for instance)

in your case, when $wnd.$('#gramTree').text("text changed from JSNI jQuery"); is called #gramTree element is not attached to DOM and not visible to jQuery.

这篇关于JSNI（GWT-GWTP）：在ready事件触发后，jQuery在'document ready'函数中不选择节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！