jQuery special events

Custom click event http://benalman.com/news/2010/03/jquery-special-events/

by Ben Alman

HTML

<h1>
    <a href="http://benalman.com/news/2010/03/jquery-special-events/" target="_top">jQuery special events</a>
    &raquo; Custom click event
</h1>

<p class="intro">(hover over boxes)</p>

<div id="test">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

CSS

body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; }
h1 { font-weight: 700; font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif; }
h1, a { color: #913D00; }
a:hover { color: #FF7F00; }
h1 { font-size: 120%; margin-bottom: 0.6em; }
.intro { font-style: italic; margin-top: 0.5em; }

#test div {
    border: 1px solid #000;
    margin: 1em 0;
    padding: 0.5em 1em;
}

#log {
    margin-top: 1em;
}

JavaScript

$(function(){
  
  // All div elements will have their cursor automatically pointer-ified.
  $('#test div').bind( 'click', function(){
    alert( 'I have been clicked!' );
  });
  
});

//////////////////////////////////////////////////
// THE FOLLOWING CODE IS TAKEN FROM THE EXAMPLE //
//////////////////////////////////////////////////

(function($){
  
  // Special event definition.
  $.event.special.click = {
    setup: function() {
      // This is only done the first time a "click" event handler is bound,
      // per-element.
      $(this).css( 'cursor', 'pointer' );
      
      // Bind the "click" event normally.
      return false;
    },
    teardown: function() {
      // This is only done the last time a "click" event handler is unbound,
      // per-element.
      $(this).css( 'cursor', '' );
      
      // Unbind the "click" event normally.
      return false;
    }
  };
  
})(jQuery);