title: jQuery bind event listener before another
body: <p>Using the <a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/" rel="noreferrer">prettyPhoto</a> plugin to open modal-style content containers, and trying to integrate with Google Analytics' Event Tracking to track when videos get opened.</p>
  
  <p>Trouble is, when I </p>
  
  <pre><code>$('a.videoClickListener').click(function(event){
      console.log('here');
      _gaq.push(['_trackEvent', 'Product Page', 'Video Open', '&lt;?php echo $product-&gt;getNameWithManufacturer(); ?&gt;']);
  });
  </code></pre>
  
  <p>the event is never fired, as prettyPhoto stops the event from continuing (quite rightly, as otherwise the page would change if a hyperlink was clicked).</p>
  
  <p>prettyPhoto does not seem to provide an 'open' callback function, but if it did I couldn't use it anyway, as the prettyPhoto listeners are set up somewhere in the layout (we use <code>rel="prettyPhoto"</code> every time we want to use prettyPhoto, and pass params through the URL, which is the prettyPhoto-recommended way of doing things).  I would also like to pass the product details to Analytics, ruling out a global video-opening listener across all prettyPhoto opening events.</p>
  
  <p>How can I bind my listener <em>before</em> the prettyPhoto listener?  If it turns out I have to use <code>.unbind()</code>, then bind my listener, and then rebind prettyPhoto, how can I unbind a handler specified in a plugin?</p>