|
Differences in calling a function in JQuery |
||||||||
I'm still playing around with some aspects of JQuery, and I noticed recently that I was still writing functions in the old school JavaScript fashion. I was constructing a JQuery selector, and then pointing the event handler to a separate JavaScript function.
Like this:
1$("#type").change(changeFields);
2
3function changeFields(){
4 var selected = $("#type option:selected").val();
5 $('.formElems').hide();
6 $("." +selected).show();
7 }
2
3function changeFields(){
4 var selected = $("#type option:selected").val();
5 $('.formElems').hide();
6 $("." +selected).show();
7 }
I noticed then that all the other JQuery based functions do not construct the function as a separate entity. The function is embedded within the actual event handler.
More like this:
1$("#type").change(function ()
2 {
3 var selected = $("#type option:selected").val();
4 $('.formElems').hide();
5 $("." +selected).show();
6 });
2 {
3 var selected = $("#type option:selected").val();
4 $('.formElems').hide();
5 $("." +selected).show();
6 });
Both methods work equally as well (IE they do what they are supposed to) but I can't see any reason you would do one over the other. The only thing I can think of is that in the first example the function is reference able from elsewhere, whereas the second code example is not.
Anyone more knowledgeable than me got a view on this?
TweetBacks
http://api.jquery.com/unbind/
$("#type").change(function (){
$('.formElems').hide();
$("." +$("#type option:selected").val()).show();
}}
@Joel, I prefer the more compact version myself, I think unless there is a good reason to create a seperate function I'd use the shorter version.