GWT JSNI jquery, use ui:field to select element in callback not work

Question

public class SettingMailPage {
    @UiField
    ButtonElement save;
    @UiField
    AnchorElement input;


    SettingMailPage()
    {
       bindActions(save.cast(),input.cast());
    }


    private native void bindActions(JavaScriptObject save, JavaScriptObject input)
    /*-{
          $wnd.$(save).click(function () {
            $wnd.alert($wnd.$(input).size());//always 0, why?
          });
    }-*/;
}

I'd like to know why the bind action works while in callback it fail to select that element, and any workaround. Thanks

EDIT:

   private native void bindActions(JavaScriptObject save, JavaScriptObject input)
    /*-{
          var thatInput=input;
          $wnd.$(save).click(function () {
            $wnd.alert($wnd.$(thatInput).size());
          });
    }-*/;

will work, but not know the reason, could someone explain?

Answer 1

As bindActions is evaluated before the click callback, the callback has no chance accessing the input in the state it was when passed to the method.

The only way to do so is locking the state by holding a reference (like you smartly did), or wrapping the entire binding in a closure (terribly cumbersome and redundant), which will look like this:

private native void bindActions(JavaScriptObject save, JavaScriptObject input) /*-{

    (function(in) {
        $wnd.$(save).click(function () {
            $wnd.alert($wnd.$(in).size());
        });
    })(input);
}-*/;

It's all about context; remember that inside the callback, you're referring to the function owner (which is save button). See the ridiculously famous article on quirksmode on the subject.