Question

The original code:

this.control.addEventListener('click', $.proxy(function() {
    this.time.hashours = (this.duration() / 3600) >= 1.0;
    this.time.duration.text(getTime(this.duration(), this.controls.time.hasHours));
    this.time.current.text(getTime(0, this.controls.time.hasHours));
}, this));

The attempt at cross-browser support:

$(this.control).bind('click', $.proxy(function(e) {
    var o = e.delegateTarget;
    o.time.hashours = (o.duration() / 3600) >= 1.0;
    o.time.duration.text(getTime(o.duration(), o.controls.time.hasHours));
    o.time.current.text(getTime(0, o.controls.time.hasHours));
}, this));

Even with the proxy, the context of this no longer belongs to the calling object because of jQuery’s custom event model. How can I get the original this.control?

Answer 1

Even with the proxy, the context of this no longer belongs to the calling object because of jQuery’s custom event model.

I don’t think jQuery’s custom event model is the problem here. When you proxy the callback function, the this value should refer to the root object that contains control and other properties such as ctime and time as in your original example.

In other words, don’t try to get the original object like this from the delegateTarget

var o = e.delegateTarget;
o.time.hashours = (o.duration() / 3600) >= 1.0;
...

but just stick to your original code,

this.time.hashours = (this.duration() / 3600) >= 1.0;

Checkout this minimal example that resembles your structure.