Question

The following code attaches a new element with every subsequent click on the 2nd div. With each adding, the focus is set to the added element, so that it is ready for blur methods (I am setting the tabIndex attribute just for this purpose).

However, on clicking outside the new element, nothing happens, even though there should be a pop-up. Can anyone tell me what’s wrong with this code?

    public void onModuleLoad() {
        VerticalPanel vert = new VerticalPanel(); 
        String foo = "<div id ='foo'>Foo</div>";
        $("#bodywrapper").append(foo);
        $("#bodywrapper").append("<div id ='boo'>Boo</div>");
        $("#boo").click(new Function() {
            public boolean f(Event e) {
//              Window.alert("foo");
                $("<div id ='goo' tabIndex = '1'>Boo</div>").appendTo("#bodywrapper").focus();
                return true;
            }
        });
        $("#goo").live("blur", new Function() {
            public boolean f(Event e) {
                Window.alert("Foo");
                return true;
            }
        });
        RootPanel.get().add(vert);

      }
}

Answer 1

The blur and focus events don’t work with event delegation (live or delegate methods) because they’re not bubbling events. JQuery introduce the special events focusout and focusin for this purpose. But GwtQuery doesn’t support them yet. Please open an issue there and they will be implemented