When you attach an event to a collection of elements using jQuery, the event will only affect elements which exist at that moment in time. For example:

// affects all matching elements which exist now
$('.alreadyExists').click(someFunction);
 
// this element will not have an onclick event
$(newElement).addClass('alreadyExists');

In this scenario, if you wanted to add the event to the new element, you would need another line of code adding the click event to the element.

If you find yourself in this situation, you should try using jQuerys “Live” event handler instead. It provides a way of ataching events to all current and future elements which match the given selector. For example:

// works for elements created later
$('.mightExist').live('click', someFunction);
 
// as soon as the class is added, the element also gets the onclick event handler
$(newElement).addClass('mightExist');

Did you know you can not only select existing DOM elements with jQuery’s all powerful $ function, but you can also create brand new ones? For example:

// core javascript
var myDiv = document.createElement('div');
// jQuery version
var myDiv = $('<div>');

You can also add all the usual attributes, and they will get parsed and created alongside the element itself, although it is also perfectly possible to just chain normal jQuery methods onto the element creation for the same results.

var myDiv = $('<div class="myClass">');
// is functionally identical to:
var myDiv = $('<div>').addClass('myClass');

If you ever have multiple scripts on a page which use the $ variable (such as prototype), you can use the jQuery’s handy noConflict method to tell it to give up control of $, allowing the other library to use it instead. For example:

// will not work because $ is conflicting
$('.myClass').show();
 
// tell jQuery to play nice
jQuery.noConflict();
 
// will (probably) not work because $ is not longer a reference to jQuery
$('.myClass').show();
 
// will work instead
jQuery('.myClass').show();

Interestingly, the noConflict method returns a reference to the jQuery object, so there is nothing stopping you deciding on your own variable for future jQuery calls, like so:

// assign the result to a variable
var jq = jQuery.noConflict();
 
// jq is now functionally identical to jQuery, so this works
jq('.myClass').show();

Not earth shatteringly useful I admit, but seeing as part of the attraction of jQuery is the brevity of it’s code, having to use “jQuery” everywhere can be quite annoying, which this nicely sidesteps.