Fixing These jQuery!A Guide to Debugging

adam j. sontag

Thanks for coming!

Fixing These jQuery is an HTML5 presentation designed to familiarise developers with basic approaches to debugging
jQuery and JavaScript code. It also introduces many of the common pitfalls most people encounter at some point on their jQuery journey.
It is always a work in progress!

Use the left ← and right → arrow keys or your mouse wheel to navigate.

bind() is not live()

They do similar things. How are they different?

<div id="teddy" class="foo">
<div id="roosevelt" class="bar">

var log = function() { console.log(this.id); }
$(".foo").click(log);
$(".bar").live("click",log);
$(".foo").addClass("bar").removeClass("foo").trigger("click");
// logs 'teddy' twice
// 1) Because there is still a click handler attached to <div id='teddy'></div>
// even though it no longer has the class 'foo'
// 2) Because a "click" on an element with class "bar" bubbled to the document

.bind() creates a 1:1 association between element and handler

.live() and .delegate() check to see if the target element of a bubbled event matches certain criteria

jQuery Objects are not live

New elements that match a selector do not automagically appear in existing collections

This is a very bad idea. Just like $.get() does not wait for the callback to finish,
neither will the containing getContent function

Whither async:false?

It's not like killing a kitten, but it is like locking one in a dark room and choosing not to feed it.

Random SO Quote

"It is much better to use callbacks and start thinking asynchronously, rather than procedurally. It's a bit of a struggle when you first start (since your code isn't necessarily run in line-by-line order), but it is very powerful and flexible once you get the hang of it."nickf, 10 Nov 2009

Avast! Hoist the sails!

Variable declarations and function declarations are hoisted to the top of the function in which they're declared.

var foo = true;
if (foo) {
function checkFoo() {
document.write("Foo is right and good, it is true");
}
} else {
function checkFoo() {
document.write("Foo is nefarious and evil, it is false");
}
}
checkFoo();
// checkFoo() always writes that foo is false,
// Even though you set it true "before" defining the function!