Gquery - live method, how to use it properly

Question

I'm experiencing with Gquery and find something difficult to work with live() method. As far as I'm concerned, it is plenty useful when you want to define some behavior for "future" elements. for example, I would like to change background color to any horizontal panel I create after clicking certain button. Sample code is attached below.

RootPanel.get(); //before invoking live method, recommended in gwt forum
GQuery hPanel = mySelectors.getHorizontalPanel();
hPanel.live(Event.ONCLICK, new Function () {
    public boolean f (Event e) {
    int red = 100;
    int green = 100;
    int blue = 100;
    while (red < 250) {
        while (green < 250) {
            while (blue < 250) {
                String bgColor = "backgroundColor: 'rgb(" + red + "," + green + "," + blue + ")'";
                $(e).animate(bgColor,8);
                blue+=10;
            }
            green+=10;
        }
        red+=10;
    }               
    return false;
    }
});

HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.setHeight("40px");
horizontalPanel.setWidth("40px");
horizontalPanel.setStyleName("horizontal-panel");

final HorizontalPanel newPanel = new HorizontalPanel();
newPanel.add(horizontalPanel);
RootPanel.get("horizontalPanels").add(newPanel);

For some reason, no event is invoked when I click over the panel. The selector was declared in the following way:

@Selector(".horizontal-panel")
GQuery getHorizontalPanel();

Any help, or light over this issue would be far appreciated,

Thanks in advance!

Answer 1

I think it's because live doesn't support selectors...

Could you try to replace this part of code :

GQuery hPanel = mySelectors.getHorizontalPanel();
hPanel.live(Event.ONCLICK, new Function () {

by :

$(".horizontal-panel").live(Event.ONCLICK, new Function () {

live() needs to know the css selectors. If you use @Selector, it loose this information as GQuery replace it at compile time by the most optimized way to query the elements