GWT UiBinder：onClick 事件不会触发答案

【问题标题】：GWT UiBinder: onClick event does not fireGWT UiBinder：onClick 事件不会触发
【发布时间】：2011-02-23 17:33:47
【问题描述】：

大家好，

我有一个如下定义的小部件：

<g:HTMLPanel>
    <g:HTML ui:field="rootElement" styleName="{resources.mainStructure.widgetBox}"/>
</g:HTMLPanel>

在相关的java类中有这样的东西：

@UiField HTML rootElement; 

for(int row = 0; row < 10; row ++) {            
    rootElement.getElement().appendChild(new MyWidget().getElement());
}

MyWidget 是这样的：

<g:HTMLPanel>

<table  border="0" cellpadding="0" cellspacing="0" class="{resources.mainStructure.areaWidget}"> 
     <tbody class="{resources.mainStructure.workArea}"> 
       <tr>
         <td ui:field="td_1"/> 
         <td ui:field="td_2"/> 
         <td ui:field="td_3"/> 
         <td ui:field="td_4"/> 
         <td ui:field="td_5"/> 
         <td ui:field="td_6"/> 
         <td ui:field="td_7"/> 
         <td ui:field="td_8"/> 
       </tr> 
     </tbody> 
     <tfoot class="{resources.mainStructure.lineaBus}"> 
       <tr> 
         <th ui:field="th_1"/> 
         <th ui:field="th_2"/> 
         <th ui:field="th_3"/> 
         <th ui:field="th_4"/> 
         <th ui:field="th_5"/> 
         <th ui:field="th_6"/> 
         <th ui:field="th_7"/> 
         <th ui:field="th_8"/> 
       </tr> 
     </tfoot> 
 </table>

在某些时候，我将另一个小部件附加到某个 td，这个：

<g:HTMLPanel>

    <g:Anchor styleName="{resources.mainStructure.orangeButton}" ui:field="selectMe">+</g:Anchor>

</g:HTMLPanel>

现在，问题是当我点击上述小部件的锚点时，没有触发点击。如果我将锚小部件附加到另一个小部件，而不是 td 小部件，它工作正常。到目前为止，我知道问题出在第一个小部件中，因为如果我将 MyWidget 附加到任何内容，则会触发“selectMe”onclick 事件。任何意见？谢谢，克里斯

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

小心使用类似...的调用

rootElement.getElement().appendChild(new MyWidget().getElement());

'appendChild(...)' 方法只不过是一个基本的 DOM 附件；它不为事件传播做任何工作。您没有使用 Widget add 方法（）是否有原因？

rootElement.add(new MyWidget());

这应该可行，并且会排列您需要的所有事件。

【讨论】：

糟糕...只是重新阅读埃米尔回答中的 cmets 并注意到他说了同样的话。这里没什么可看的……继续前进……
谢谢，您添加了一些对我有帮助的非常有用的解释
或者，在另一个类似的情况下，RootPanel.get().add(new MyWidget());

【解决方案2】：

这对我有用，不知道你是如何构建它的。所以据我了解，您不希望输出是这样的：

<g:HTMLPanel>
    ...
         <td ui:field="td_1">
            <g:HTMLPanel>
                <g:Anchor styleName="" ui:field="selectMe">+</g:Anchor>
            </g:HTMLPanel>
         </td> 
    ...

在我创建 selectMe 锚点的 ui binder 类中，我刚刚添加了一个 UiHandler，如下所示：

@UiField Anchor selectMe;
@UiHandler("selectMe")
void onSelectMeAnchorClick(ClickEvent event) {
    Window.alert("clicked on selectMe");
}

当我单击链接时，这会为我触发警报。希望这可以帮助你。

【讨论】：

感谢您的回复。实际上，实际情况略有不同，我忘了提及（因为我认为这是不必要的，但从您的测试中我了解到问题就在那里）。我将编辑问题并提供更多详细信息。
问题是 HTML 小部件，它对我也不起作用。所以我用 VerticalPanel 替换了它，并将 appendChild 方法替换为“rootElement.add(new MyWidget());”