jQuery Namespacing with on() and off() method

With jQuery 1.7, jQuery team introduced 2 new ways to attach and remove events. on() method is used for attaching events to DOM elements, and off() method is used to removed event handlers. And you should use on() and off() only to attach and remove handlers, instead of bind(), live() anddelegate(). 

Related Post:

• bind() vs live() vs delegate()

There could be a situation where you have assigned multiple handlers on single event. For example,

1	$('#btnClick').on('click', func1());

2	$('#btnClick').on('click', func2());

Now, when trigger() is called on element, then both the function will get executed.

1	$('#btnClick').trigger('click'); // both functions will be called.

And when off() method will be called on element, both the functions will be removed.

1	$('#btnClick').off('click'); // both functions will be removed.

Now, what if when there are multiple handlers on single event and there is a need to call specific handler? In such situation, event namespacing is your friend.

Using event namespacing, at the time of creating event we can assign name. For example, "click.callFunc1" defines callFunc1 namespaces for this particular click event. Later on based on namespace, we can trigger or remove specific handler.

1	$('#btnClick').on('click.callFunc1', func1());

2	$('#btnClick').on('click.callFunc2', func2());

So to call func1() only, pass event.namespace in trigger() method.

1	$('#btnClick').trigger('click.callFunc1'); // Only func1() will be called.

And to remove specific function, pass event.namespace in off() method.

1	$('#btnClick').off('click.callFunc1'); // Only func1() will be removed.

You can also assign multiple namespaces together.

1	$('#btnClick').on('click.callFunc1.callFunc2', func1());

Common jQuery Mistakes

Well, Everyone makes mistakes and and best part would be not to repeat them again. You should "Always make new mistakes" :). jQuery is awesome library. But believe me, it can make you crazy if it is not used properly and efficiently. It can hit performance of your page and you don't even realize it. Ask yourself that as a developer while writing jQuery code do you really think about performance or it is only when your client shouts.

I have listed down 10 common jQuery mistakes from my personal experience and their fixes that you might be also doing while writing jQuery code.

1. Be courageous to remove jQuery

Sometimes things can be done easily via CSS without even thinking about jQuery but we don't realize it. Plain CSS is far better than jQuery. So be open and courageous to remove jQuery whenever needed.

2. Not using latest version of jQuery

jQuery team is keep on updating the jQuery library and the newer version comes with lots of bug fixes and performance enhancement. I understand that it is not always possible for you to use the latest version for your old projects but I suggest for your new projects, you can use latest version of jQuery.

Read "How to always reference latest version of jQuery"

3. Not using minified version of jQuery library

The jQuery library (when you download) comes in two versions.

1. Production (Compressed Version)
2. Development (Uncompressed Version)

For development purpose, you can choose the development version of .js file as if you want to make some changes then that can be easily done. But ensure that when your software or product goes on production, always use the production version of .js file as its size is 5 times lesser than the development version. This can save some amount of bandwidth.

4. Not loading jQuery from Google CDN

Google is sea of free services. Do you know that Google is also hosting jQuery libraries on its CDN(Content delivery network) and allows any website to use it for free.

Why to use Google CDN?

• Caching: The most important benefit is caching. If any previously visited site by user is using jQuery from Google CDN then the cached version will be used. It will not be downloaded again.
• Reduce Load: It reduces the load on your web server as it downloads from Google server's.
• Serves fast : You will be also benefitted from speed point of view. As Google has dozen's of different servers around the web and it will download the jQuery from whichever server is closer to the user. Google's CDN has a very low latency, it can serve a resource faster than your webserver can.
• Parellel Downloading: As the js file is on a separate domain, modern browsers will download the script in parallel with scripts on your domain.

Read "Why to use Google hosted jQuery CDN"

5. Not loading jQuery locally when CDN fails

It is a good approach to always use CDN but sometimes what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting.

I always recommend that write the code, if jQuery library is not loaded properly then it should use your local copy of jQuery.

1	<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

2	<script type="text/javascript">

3	if (typeof jQuery == 'undefined')

4

{

5	document.write(unescape("%3Cscript src='Scripts/jquery.1.9.0.min.js' type='text/javascript'%3E%3C/script%3E"));

6

}

7

</script>

It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In this example, the jQuery.js is loaded from Scripts folder.

6. Not using selectors efficiently

Be smart while using selectors. As there are many ways to select element using selectors but that doesn't mean that all are equal. Always try to use ID and Element as selector as they are very fast. Even the class selectors are slower than ID selector.

When IDs are used as selector then jQuery internally makes a call to getElementById() method of Java script which directly maps to the element.

When Classes are used as selector then jQuery has to do DOM traversal.So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.

7. Using jQuery selectors repeatedly

Take a look at below jQuery code. The selectors are used thrice for 3 different operation.

1	$("#myID").css("color", "red");

2	$("#myID").css("font", "Arial");

3	$("#myID").text("Error occurred!");

The problem with above code is, jQuery has to traverse 3 times as there are 3 different statements.But this can be combined into a single statement.

1	$("#myID").css({ "color": "red", "font": "Arial"}).text("Error occurred!");

This will ensure that jQuery traverse only once through DOM while selecting the element.

8. Not knowing how selectors are executed

Do you know how the selectors are executed? Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".

1	$("p#elmID .myCssClass");

9. By not caching the stuff

Caching is an area which can give you awesome performance, if used properly and at the right place. While using jQuery, you should also think about caching. For example, if you are using any element in jQuery more than one time, then you must cache it. See below code.

1	$("#myID").css("color", "red");

2	//Doing some other stuff......

3	$("#myID").text("Error occurred!");

Now in above jQuery code, the element with #myID is used twice but without caching. So both the times jQuery had to traverse through DOM and get the element. But if you have saved this in a variable then you just need to reference the variable. So the better way would be,

1	var $myElement = $("#myID").css("color", "red");

2	//Doing some other stuff......

3	$myElement.text("Error occurred!");

So now in this case, jQuery won't need to traverse through the whole DOM tree when it is used second time. So in jQuery, Caching is like saving the jQuery selector in a variable. And using the variable reference when required instead of searching through DOM again.

10. Not checking while using various plugins

One of the great feature of jQuery is various plugins available created using jQuery are available for free. You like a jQuery plugin and start using it in your project. But while using plugins do you really consider,

• File size
• Performance of plugin
• Browser Compatibility

Before using any plugin, always ensure that it must not hit performance of your page and it should not conflict with other plugins that you are using already.