why do i need indirection in jquery/javascript?

[Jeanne Boyarsky]

I have a JavaScript widget as shown below that I'm converting to register with jQuery's event handlers (so I can call more than one event at a time.) It works fine when I assign my function to a local variable. When I refer to "this.myFunction" directly in the jQuery ready construct, I get "handler is undefined". Why is that? I'm not clear on why I need the extra level of indirection.

function MyWidget() {
	
// handle event for onFocus
this.handleFocus = function() {
        // do something here
	return true;
}

// not sure why can't use "this.name" directly
var focusFunction = this.handleFocus;

$(document).ready(function() {
	$('#' + field.id).bind('focus', focusFunction);
});

// but this doesn't work
/*$(document).ready(function() {
	$('#' + field.id).bind('focus', this.handleFocus);
});*/

}

[edited to correct error message]

[Jeanne Boyarsky]

Not only have a done this correctly before, but I had a comment in the code because I knew I would forget. See callbacks here

[Jeanne Boyarsky]

Working code. Comments on any anti-practices in this are welcome.

function MyWidget() {

var thisViaClosure=this;	
	
// handle event for onFocus
function handleFocus() {
        // do something here using thisViaClosure.variables
	return true;
}

$(document).ready(function() {
	$('#' + field.id).bind('focus', handleFocus);
});

}

[Bear Bibeault]

You have a document ready handler inside a function?

[David Newton]

The "this" issue is one of my very few *major* beefs with JavaScript-the-language. It makes sense when you think about it, but JavaScript makes you think about binding more than a lot of other languages. It's the cause of a *lot* of bugs and questions, that's for sure.

I think the List Apart article on JavaScript binding is pretty good.

[Jeanne Boyarsky]

Bear Bibeault wrote:You have a document ready handler inside a function?

Um. Yes. Clearly that isn't a good idea from your reaction. Where should it be? Inside the .js file but outside the scope of MyWidget?

Before I started this, I had something like the following inside the function:
form[id].onFocus = handleFocus.

[Bear Bibeault]

Yes, it's unusual. Do you call MyWidget in top-level code?

Usually the document ready handlers (there can be as many as you like) are declared at top-level so that they register the ready handlers as the page is being evaluated prior to display.

Another jQuery best practice: unless it's necessary because a function is to be called from more than one location, the creation of named functions is regarded as needless. You'll generally see one-time functions declared inline as closures.

[Jeanne Boyarsky]

Bear,
I see. Now that you mention it, the ready part is redundant. MyWidget is instantiated in the initialization method (called from onload) in the main HTML. The fact that the code gets run implies the page has loaded. [And yes, I know this isn't a jQuery practice - the JSP I'm working on predates us using jQuery.]

Also good point about the unnecessary named function. it was there before I started changing things so I didn't think anything of it.