MooTools/JS: bindWithEvent

Question

There's this piece in the codebase I'm working on:

this.element.addEvent('click', this.clickEvent.bindWithEvent(this));

I want to change it so that the click event makes sure the window is loaded first. So I tried:

var t = this;
this.element.addEvent('click', function() {
    window.addEvent('load', function() {
        t.clickEvent.bindWithEvent(t));
    });
});

That doesn't seem to get it to work though. What am I missing?

Answer 1

You're adding a handler to the load event when the user clicks something, _aftertheload` event has already fired. Therefore, nothing happens.

You should probably add the click handler inside of an event handler for the load event. (swap the two addEvent lines)

Answer 2

in mootools you tend to use domready and not load but essentially, doing it as suggested will not work as it lacks the context here:

this.element.addEvent('click', this.clickEvent.bindWithEvent(this));

so you are working within a class here - therefore, make sure you instantiate it on the domready event instead, something like...

window.addEvent("domready", function() {
    // whatever you need to do...
    var foo = new myClass($("someElement"), {option: value}); // example instantiation
    // if the binding is not in the .initialize, then call the right method...
    // foo.bindMyEvents();
});

as long as the class instance is within domready, you're fine. if that's not an option, see which method binds the events and call that on the domready instead.