title: jQuery preventDefault on first click only
body: <p>I've been working on some jQuery for additional functionality on my clients shopping site.  I've been asked to create a Quick Buy button which sits on top of the products on category pages pulled in from Locatya - so far pretty straight forward.</p>
  
  <p>For the desktop site the following code works flawlessly: </p>
  
  <pre><code>jQuery('#main_cat_prods').delegate('img', 'mouseenter', function(){
                  var $skuID = this.src.match(/[a-z][a-z][a-z]\d\d\d\d\d/)[0];
  
              if ( !jQuery('#QuickBuyProdBox').length ) {
                  jQuery(this).closest('.image').prepend('&lt;div id="QuickBuyProdBox"&gt;');
              };
                  jQuery("#QuickBuyProdBox").click(function(){
                      jQuery.event.trigger('lightbox', $skuID);
                  });
                  jQuery('.image, #QuickBuyProdBox').mouseleave(function(){
                      jQuery('#QuickBuyProdBox').remove();
              });
          });
  </code></pre>
  
  <p>Now, the difficulty comes when trying to develop a slightly different functionality on tablets; my client desires a single tap to prepend the QuickBuyProdBox and second tap to either:</p>
  
  <p>Continue as normal to the product page IF clicked outside of the QuickBuyProdBox
  Fire up the lightbox IF clicked on the QuickBuyProdBox.</p>
  
  <p>I'm struggling first of all with:</p>
  
  <p>Preventing default behavior of the img on the category page, I've tried preventDefault BUT this stops ALL click events on the main_cat_prods div.  I've also tried binding click for the first instance then unbinding it, this too doesn't seem to work:</p>
  
  <pre><code>jQuery("#main_cat_prods").bind('img', 'click', function( event) {
              if ( !jQuery('#QuickBuyProdBox').length ) {
                  jQuery(this).closest('.image').prepend('&lt;div id="QuickBuyProdBox"&gt;');
              };
              console.log("this works");
              event.preventDefault();
              jQuery(this).unbind( event );
          });
  </code></pre>
  
  <p>To summarize, the above code doesn't work.  I need to be able to:</p>
  
  <p>Click on the main_cat_prods div and prevent default functionality while prepending QuickBuyProdBox.
  Be able to click either main_cat_prods OR QuickBuyProdBox
  Remove QuickBuyProdBox by clicking outside of (this) img OR clicking on another product.</p>
  
  <p>Any suggestions?</p>
  
  <p>Let me know if this doesn't make sense, I can attempt to reword it!</p>
  
  <p>Cheers,
  Myles</p>