title: zClip - How to add, fire, then remove zClip on one click of a button?
body: <p>What would be the best way to attach <code>.zclip()</code> to button, then fire it, then remove <code>.zclip()</code>? It sounds simple enough but I can't get it cooperate.  I have a page with many buttons, some directly accessible, some buttons are accessed via various accordions and tabs.  Many of the copy targets contain dynamic data, some of which are inserted via ajax.  Also many of the sections are collapsible. If the flash overlay that <code>.zclip()</code> attaches to the button is present when the section closes, then it causes the animation to glitch.   </p>
  
  <p>I have tried to approach this from several different ways:  </p>
  
  <p>Attaching <code>.zclip()</code> all the button elements, and then refreshing the page at set interval.  While it does capture the dynamic data, its performance is horrible.  </p>
  
  <p>Attaching and removing <code>.zclip()</code> based on <code>mouseenter</code> and <code>mouseleave</code> events, as well as <code>mouseover</code> and <code>mouseout</code>.  When attaching this way, all the events are firing many times per second causing multiple flash overlays to be bound to one button.  </p>
  
  <p>Attaching and removing <code>.zclip()</code> based on <code>.hover()</code> and <code>.hoverIntent()</code>.  While this behaves better than the above attempt and captures the dynamic data, the events fire way to much still. I have tried doing a <code>.hover()</code> on the parent section and attaching <code>.zclip()</code> to all the buttons in that section.  That works but its performance is terrible.</p>
  
  <p>I am convinced that there is an easy solution to this, but I just cant figure it out.  I can bind <code>.zclip()</code> via <code>.click()</code> and it will attach to a button.  I can remove <code>.zclip()</code> via its <code>afterFunction</code> parameter.  I cant figure out how to pass an additional <code>click</code> event to the button and fire <code>.zclip()</code> once its attached.  It will work, but the button has to be clicked twice.  Once to activate it, the one to fire and remove it.  I was thinking maybe the additional <code>click</code> event needs to be sent to the flash overlay and not to the button again.  Perhaps someone can point me in the right direction?</p>
  
  <p><a href="http://www.steamdev.com/zclip/" rel="nofollow">zClip Homepage</a>  </p>
  
  <p><a href="http://jsfiddle.net/ShinMessiah/GqT3r/24/" rel="nofollow">jsFiddle of this code: </a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id='copy'&gt;Test&lt;/div&gt;
  &lt;button&gt;Click Here To Copy The Div Above!&lt;/button&gt;
  &lt;span id='success'&gt;Success!&lt;/span&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#copy{
      height: 100px;
      width: 200px;
      padding: 3px;
      margin-bottom: 5px;
      border: 1px solid black;
      border-radius: 6px;
  }
  #success{
      color: rgba(84,240,84,1);
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
      var copySuccessHide = function(){
          $( "#success" ).css({opacity: 0.0, visibility: "visible"});
      };
      copySuccessHide();/*hide the success indicator*/
      var copyData = $("#copy").text();/*get data from copy target*/
      var afterCopyFunction = function(){
          $("#copy").effect( "highlight" , {color : "rgba(230,255,230,1)" }, 1000 )
          $("#success").effect( "pulsate", "fast", copySuccessHide );
          $("button").zclip('remove');/*remove zclip*/
          };
  
      $("button").click(function () {/*bind zclip to the button on click*/
          $("button").zclip({
                  path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
                  copy: copyData,
                  afterCopy: afterCopyFunction,
                  clickAfter: false
              });
      });
  });
  </code></pre>