[jQuery] Trouble with "this"
<div>I'm having trouble using "this" in my objects when the method is triggered by an event.</div><div>
</div><div>Here's my basic test class. The lines that do not work as expected are in red.</div><div>
</div><div><div>var MyClass = function(selector)</div><div>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>this.hello = 'Hello World!';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>var onClick = function()</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>alert('onclick: this = ' + this); // <-- object HTMLInputElement</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="color: rgb(204, 0, 0);">alert(this.hello); // <-- does not work: undefined</span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>otherFunc();</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var otherFunc = function()</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-style-span" style="color: rgb(204, 0, 0);">alert('otherfunc: this = ' + this); // <-- object Window ??</span></div>
<div><span class="Apple-tab-span" style="white-space:pre"><span class="Apple-style-span" style="color: rgb(204, 0, 0);"> </span></span><span class="Apple-style-span" style="color: rgb(204, 0, 0);">alert(this.hello); // <-- does nto work: undefined</span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$(selector).click(onClick);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>alert('loaded: this = ' + this); // <-- object Object</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>alert(this.hello); // <-- alerts "Hellow World!"</div>
<div>};</div><div>
</div><div>The way this works is instantiating a new MyClass object binds the click event to the selector. This works fine, but "this" loses its scope, even when calling other functions.</div>
</div><div>
</div><div>To see this in action, check out this page (watch out for the alerts ;)).</div><div>
</div><div>Any ideas on how to keep "this" within scope?</div><br clear="all">-Hector