Получение JQuery для работы над именем класса, динамически добавленным GWT

Question

Я пытаюсь получить jquery для выполнения некоторых атак ui для меня при использовании 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

Что именно вы пытаетесь достичь? Скрыть виджет на основе применяемых стилей или его идентификатора? (В текущей версии, кажется, вы смешиваете одно с другим)

Если ClickEvent стреляет поститься (который может быть проверен путем добавления тайм-аут перед ним), вы можете попробовать окружив его DeferredCommand.

Другая возможность заключается в том, что JQuery является crapping вверх;) У меня были некоторые странные проблемы при использовании функции обратного вызова в JQuery/Mootools - причина в том, что эти рамки расширения/изменения function() (между прочим) - однако, JSNI материал выполнен из «чистого» 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 2

Возможно, вам стоит попробовать GWTQuery http://code.google.com/p/gwtquery/ вместо этого попытаться интегрировать его изначально.

Answer 3

Добавьте класс к элементу, который вы хотите закрыть на щелчок, т.е.

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

Ваш Javascript может автоматически связать функцию для любого из существующих или динамически создаваемых элементов, которые соответствуют селектору:

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

Answer 4

Ваш код требует двух щелчков мыши, потому что вы устанавливаете событие привязки Jquery click при первом щелчке (через метод onclick), и поэтому последний реагирует на второй щелчок.Изменение кода в чем-то вроде этого:

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

FYI, вы можете использовать GwtQuery (GWT клон JQuery) и код не должен выглядеть так:

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