Question

我正在尝试让jquery在使用GWT时对我做一些影响。我收到通知，我添加到一个页面，点击后应该消失。由于可能存在多个相同类型的通知（警告，错误等），我只是在通过GWT单击它们然后让jquery对该特定类名进行操作时，尝试动态添加样式名称。

问题是jquery函数在添加样式名称之前触发，因此用户必须单击两次通知才能关闭它。

有什么想法吗？

  public abstract class AbstractNotificationWidget extends Composite implements ClickHandler, HasClickHandlers {

  protected abstract String getUniqueId();

  @Override
  public HandlerRegistration addClickHandler(ClickHandler handler) {
    return addDomHandler(handler, ClickEvent.getType());
  }

  @Override
  public void onClick(ClickEvent event) {
    doClick(getUniqueId());
  }

  protected static native void doClick(String name) /*-{
    $wnd.$("#" + name).click(function () {
      $wnd.$(this).slideUp("slow");
      $wnd.$("div", this).fadeOut("slow");
      });
  }-*/;

}

然后我有了扩展上面类

的子类

public class ErrorNotificationWidget extends AbstractNotificationWidget {

  private final String uniqueId;

  public ErrorNotificationWidget (String title, String message) {
    uniqueId = DOM.createUniqueId();

    initWidget(uiBinder.createAndBindUi(this));

    this.getElement().setId(uniqueId);

    this.addClickHandler(this);
  }
  @Override
  protected String getUniqueId() {
    return this.uniqueId;
  }

这些子类使用UIBinder来确定应如何绘制它们。然后将这些小部件添加到要显示的面板中。

Answer 1

也许您应该尝试GWTQuery http://code.google.com/p/gwtquery/而不是尝试本地集成它。

Answer 2

你到底想要达到什么目的？根据已应用的样式或它的ID隐藏窗口小部件？（在当前版本中，您似乎正在将一个与另一个混合）

如果ClickEvent快速触发（可以通过在其之前添加超时来测试），您可以尝试将其包装在DeferredCommand中。

另一种可能性是jQuery正在崩溃;）在jQuery / Mootools中使用回调时我有一些奇怪的问题 - 原因是这些框架扩展/更改function()（除其他外） - 但是，JSNI stuff是从一个“干净的”iframe执行的，jQuery没有做任何更改（这就是你必须通过$wnd引用主窗口的原因）。您可以通过在主机HTML页面中定义测试函数，然后在void doClick(String name)方法中将其作为回调函数传递来测试这是否是此问题：

protected static native void doClick(String name) /*-{
  $wnd.$("." + name).click($wnd.jqueryTest); // BTW, why '"." + '?
}-*/;

我的初步建议仍然存在 - 使用FocusPanel作为您的主要小部件 - 尝试正确实施HasClickHandlers（和类似的界面）是我的经验中的PITA导致奇怪的错误和/或内存泄漏。

Answer 3

在要点击的元素上添加一个类，即

<div class="close-on-click">Content</div>

您的javascript可以为与选择器匹配的任何现有或动态创建的元素自动绑定该函数：

$('.close-on-click').live('click', function() {
  $(this).remove();
});

Answer 4

您的代码需要两次单击，因为您在第一次单击时通过onclick方法安装了Jquery单击绑定事件，因此最后一次响应第二次单击。改变你的代码：

protected static native void doClick(String name) /*-{     
      var $_this = $("#" + name);
      $_this.slideUp("slow");       
      $wnd.$("div", $_this).fadeOut("slow");       
}-*/;

仅供参考，你可以使用GwtQuery（jQuery的gwt clone），代码应该是这样的：

import static com.google.gwt.query.client.GQuery.$; 

public abstract class AbstractNotificationWidget extends Composite implements ClickHandler, HasClickHandlers {    

@Override   
public HandlerRegistration addClickHandler(ClickHandler handler) {     
    return addDomHandler(handler, ClickEvent.getType());   
}    

@Override   

public void onClick(ClickEvent event) {     
    $(this).slideUp(Speed.SLOW);
    $("div", getElement()).fadeOut(Speed.SLOW);
}    

}

无需使用uniqueId

让JQuery对GWT动态添加的类名进行操作

4 个答案: