Question

I am trying to add a simple click listener to an element like this:

$(".choice_span").bind(Event.ONMOUSEUP, new Function() {
                public boolean f(Event E) {
                Window.alert("foo");
                return true;
            }
        });

But when I click, nothing happens (all imports are fine, there’s no problem with that). So I though that may be I should wait for all elements to load. So I changed it to:

Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand () {
        public void execute () {
            $(".choice_span").bind(Event.ONMOUSEUP, new Function() {
                public boolean f(Event E) {
                Window.alert("foo");
                return true;
            }
        });
        }
    });

But still the click listener is not working. There’s no problem with GWTquery I think, because if I replace the event handler by something like $(".choice_span").text("foo"), all such spans change their text to foo on page-load. Can anyone tell me what is possibly wrong here?

Answer 1

You have to ensure that the elements you’re targeting are in the dom.
If you are playing with a widget, you can pass the widget as context of your query

$(".choice_span", myWidget).bind(...)

or execute your query when the widget is being attached :

myWidget.addAttachHandler(new Handler() {
            @Override
            public void onAttachOrDetach(AttachEvent event) {
                if (event.isAttached()) {
                   $(".choice_span").bind(Event.ONMOUSEUP, ...);
                } else {
                   $(".choice_span").bind(Event.ONMOUSEUP);
                }
            }
        });

And if you want to listen on a click, I recommend you to use the click() method.