The goal of this article is to exhibit the most common pitfalls people encounter with jQuery. This article assumes that you know what jQuery is and have some basic familiarity with using it.
Excessive jQuery Calls
It's unfortunately common to see code like this
This code is unnecessarily expensive, because it is making repeated calls to jQuery to look for elements that match the
There are two alternative ways to do this. First, you can cache the query.
var $example = $("#example");
When assigning a jQuery object to a variable, the convention is to put a dollar sign (
$) before the name to demarcate it as a jQuery object.
Second, you can use method chaining. jQuery methods will return new jQuery objects that you can call more jQuery methods on.
$("#example").text("Hello, world!").css("color", "red").addClass("fun");
Mistakes with selectors
Missing parts of selectors
There is one single silly mistake with jQuery selectors that I've made so many times and that has wasted much more debugging time than I would like to admit. Do you see the problem with the following sample?
It's easy to miss. In case you didn't notice, there is no hash (
#) or dot (
.) in the selector to specify that it is searching for an element with a particular id or a set of elements with a particular class. The given selector will look for elements with the tag name
example -- which won't exist in any normal circumstances.
Let's suppose you had some markup like this, in the midst of lots of other markup
and you decided to select all the divs with the class
box. So you just use the class selector.
This will work, but it will search the entire page for elements with the
box class. This can be a very expensive operation. If you know that all the elements with the
box class are inside of the
container div, you can speed things up by limiting your search boundaries. There are a few different ways to do this in jQuery.
It's fairly common to see the same effect being performed on multiple selections of elements.
It's better to use the comma (
,) selection operator to match multiple selections
$("#main, #content, .important").css("color", "red");
These lines of code are unfortunately common
if($("#el").is(":visible")) $("#el").css("display", "none");
else $("#el").css("display", "");
$("#el").prop("class", $("#el").prop("class") + " " + newClass);
when there are faster and more readable shortcuts
Unfamiliarity with the DOM
It's a good idea to get acquainted with the DOM, because there are some things that using jQuery for is excessive. For example,
is excessive when you can just use
Similarly, you can use
this.id instead of
$(this).attr("id"). Be careful, though: some properties are not standard will not work across browsers. For example, the non-standard
.class property will work on some browsers but not others, but the standard
.className should work universally.
The A in AJAX stands for Asynchronous
You should take advantage of asynchronous requests. Too often people will be frustrated with functions not executing in the order they expected and then disable the asynch property
async this makes things slower and locks up the browser during the request--so it's usually a bad idea. You should use callbacks instead to manage how you want things to be executed. Explaining how callbacks work is outside the scope of thise article, but there are good reources explaining it.
Understanding Dynamic Changes
Suppose that you have this code,
and then you dynamically add some buttons to the page. You will notice that the added buttons will not fire the
doSomething function. Why is this? The
click function only bind the event to the
button elements that already exist. If you want it to also bind the event for every button that will be added to the page, you need to use the delegate jQuery method
$(document).delegate("button", "click", doSomething);
This will bind the
doSomething function to every button that will ever exist inside of the document. If you only wanted to bind it with with buttons inside a certain selector, then you would replace
document with whatever selector you wanted.
That's all, folks!
These are the most common jQuery pitfalls that I have seen and been bit by. If there is an obvious one that I am missing, let me know about it and I might update this article.