Deselecting an element in jQuery
<p>I have a collection of <code>span</code> elements. In the code I have a global variable that represents the "selected" object. Using the <code>click</code> event when a <code>span</code> is clicked I reset the object's class, reset the global variable, then set the object to the variable and change its class (to make it "highlighted"). This effectively toggles selection when clicking an object.</p>

<pre><code>var currentItem = null;
$( ".item" ).click( function() {
    if( $( this ).hasClass( "selected" ) ) {
        $( this ).removeClass( "selected" )
        currentItem = null;
    } else {
        if( $( ".item" ).hasClass( "selected" ) ){
            $( ".item" ).removeClass( "selected" )
        }

            $( this ).addClass( "selected" );
            currentItem = $( this );
        }
} );
</code></pre>

<p>What I'd like to be able to do is unselect when clicking on an empty area of the page. I tried creating a click event on the <code>body</code> object, but that overrode the <code>span</code> click event so nothing was selected. I'm a complete jQuery noob and not sure where to go with this.</p>
