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);
}
}