jQuery is not defined

You have not loaded jQuery correctly

Is the script included?

Is the path correct?

$ is not defined

jQuery is loaded, but the $ alias is not assigned to it.

Was jQuery.noConflict() run? (Wordpress does this by default.)

$.fn is not defined

Are you using another library that is taking the $ alias?

jQuery.fn.somePlugin is not defined

You have not loaded the plugin correctly

Is the script included?

Is the path correct?

Did you load the plugin after loading jQuery?

Q: Why aren't my events happening?

Do the elements you're attaching them to even exist? Type this in the console, and run it.

// Replace ".theElements" with your actual selector
console.log($(".theElements").length);

If the result is 0, the elements are not in the DOM

Checking the length property of jQuery object is the easiest & fastest way to check if a selector matched any elements. Don't use .size(), it's a waste of time.

A: A selector you are using is not correct.

A: A traversal failed to match any elements.

Don't Quote Me On That

If you are referring to DOM Elements like window or this, don't treat them like strings

$('this') // Wrong
$(this)   // Right

Q: But the result was > 0!

A: Then we forge on!

• Event delegation uses event bubbling to catch events at a higher level in the DOM than where they occurred.
• Now, you can catch events that happen on newly added elements

// All three examples will catch a click on any anchor that is ever in the page
$(document).bind("click",function(e) {
  if ($(e.target).is("a") {
    // this === document
  }
});

$(document).delegate("a","click",function(e) {
  //this === clicked anchor
});

$("a").live("click",function(e) {
  //this === clicked anchor
});

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

• Every call to jQuery's traversal/selection methods returns a new jQuery object
• That's why you can't compare jQuery objects for equality

• $("#foo") === $("#foo"); // false
  $("#foo")[0] === $("#foo")[0] // true
  

• DON'T store arbitrary data on random jQuery objects! Hint: Use .data()

• var $myCoolWidget = $("#cycleMcParallax");
  $myCoolWidget.cycleCount = 0;
  

• Beware of add()

• var red = $(".red"), green = $(".green");
  // red.length == 5; green.length == 5;
  green.add(red);
  // green.length == 5;
  green = green.add(red);
  // green.length == 10;
  
  
  

Event handlers, jQuery.fn.each, jQuery UI

Explicitly set this to be a DOM element

AJAX callbacks

Explicitly set this to be the options object

jQuery.each

Explicitly sets this to be the value being iterated, but weird.

$.each(["foo","bar"],function(i,value) {
  // this == ["f","o","o"]
  // value == "foo"
});

Random Plugins With Callbacks

Might set this, might not. Be on the lookout.

Use a variable to alias this

$("#foo").click(function(e) {
  var elem = this;
  $.getJSON("/ajax/page/",function(data) {
    $(elem).text(data.status); // ITS WORK NOW!
  });
});

jQuery.proxy

Returns a reference to a function that will run with a particular context

var person = {
  name:"Ace S. McCloud",
  init:function() {
    $("#sayHi").click($.proxy(function(e) {
       // Now 'this' refers to the person object!
       // We can still use e.target to reference the element
       $(e.target).text(this.name);
    },this));
  }
};

Likely Explanation

The request was never made. Something else in your code broke/misbehaved before the AJAX call was even fired.

Protip: Add a beforeSend callback to check if the $.ajax() function is being reached.

$.ajax({
  url:"foo.php",
  data:{hello:"there"},
  success:function(data) {},
  beforeSend:function(xhr) {
    console.debug("The XHR object has been prepared ",xhr);
  }
});

Considerably Less Likely Explanation

The request does not use an XMLHttpRequest, and is not logged by these tools.

Certain AJAX-y interactions don't actually use an XHR to communicate.

• JSONP: Creates a new script node and appends it to the head.
• 'AJAX' Upload: Uses an iframe or Flash as a proxy to do the upload.

If you are able to confirm that an XHR has indeed taken place, but your success callback isn't firing:

A1: Server Error

The resource you are requesting is returning some sort of error. Use the Network tab of your debugger to see the StatusCode and physical response from the server.

A2: Invalid JSON

If you are using jQuery.getJSON or otherwise specifying a dataType of JSON, jQuery will not fire the success callback if it cannot parse the response as valid JSON.

Valid JSON has double quotes around all strings, including keys, and is typically generated by a JSON encoder.

A3: Malformed HTML

If you are using jQuery.fn.load or otherwise appending HTML that you fetched via AJAX, make sure the HTML is structurally valid and does not contain errors.

You cannot reliably return the result of an AJAX callback back into the function that triggered it

// newContent === XMLHttpRequest
// NOT the raw server response
var newContent = $.get("remote.php",function(data) {
  return data;
}); 

var newContent;
$.get("remote.php",function(data) {
  newContent = data;
});
$("#container").html(newContent); // Nothing is appended

You cannot combine the previous two non-working techniques to create something that works

Don't feel bad, everybody tries this once

function getContent() {
  var stuff;
  $.get("remote.php",function(data) {
    stuff = data;
  });
  return stuff;
}
var newContent = getContent(); // newContent === undefined

• Same Origin Policy
• You simply cannot make a basic AJAX request of any arbitrary resource

  $.get("http://www.google.com/search?q=javascript",function(data) {
    $("#searchResults").html(data);
  });

Yes, there are workarounds:

• JSONP
• CORS,
• YQL
• Server-side proxy: use cURL, etc, on the server

• No, it's not just as good as a real callback
• Scripts won't always be executed
• Not fun to debug
• No separation of concerns