Question

this.progress.click(function(e) { // works
    var seek = (e.pageX - this.offsetLeft) / $(this).width();
    self_ref[index].seek(seek * self_ref[index].source.duration);
});

this.progress.click($.proxy(function(e) { // doesn't work
    var seek = (e.pageX - this.offsetLeft) / $(this).width();
    this.seek(seek * this.source.duration);
}, this));

this.offsetLeft works in the first example but not in the second. I need $.proxy, so I can’t get rid of it. I can’t find a way to get this.offsetLeft to work once the context has been changed inside it’s function.

PS: I can no longer go back to using self_ref[index] because of an extensions I’m working on.

Answer 1

Either keep a copy of this in the outer scope like Dennis says, or use e.currentTarget to get the DOM element that is handling the event.

this.progress.click($.proxy(function(e) { // doesn't work
    var seek = (e.pageX - e.currentTarget.offsetLeft) / $(e.currentTarget).width();
    this.seek(seek * this.source.duration);
}, this));

in your first example (non proxied): this == e.currentTarget