ZClip - How to add, run, then delete zClip with the click of a button?

Question

What would be the best way to attach .zclip() to a button, then run it and then remove .zclip() ? It sounds simple enough, but I can't get it to work together. I have a page with many buttons, some of which are directly accessible, some buttons are available through various accordions and tabs. Many of the copy targets contain dynamic data, some of which are inserted via ajax. Many sections are also legible. If the flash overlay that .zclip() attaches to the button is present when the section closes, this will cause the animation to fail.

I tried to approach this in several ways:

Attaching .zclip() all button elements, and then refreshing the page at a given interval. Although it captures dynamic data, its performance is terrible.

.zclip() and removing .zclip() based on mouseenter and mouseleave , as well as mouseover and mouseout . When this method is installed, all events are triggered many times per second, forcing multiple flash cards to be attached to one button.

.zclip() and removing .zclip() based on .hover() and .hoverIntent() . While this behaves better than the above attempt and captures dynamic data, events contribute a lot. I tried making .hover() in the parent section and binding .zclip() to all the buttons in this section. It works, but its performance is terrible.

I am convinced that this is a simple solution, but I just can't figure it out. I can bind .zclip() via .click() and it will be attached to the button. I can remove .zclip() via its afterFunction parameter. I cannot figure out how to pass an extra click event to a button and fire .zclip() after attaching it. It will work, but the button needs to be double clicked. Once, in order to activate it, he must shoot and remove it. I thought maybe an extra click event should be sent to the flash overlay, not the button again. Perhaps someone can point me in the right direction?

zClip page

js Note on this code:

 <div id='copy'>Test</div> <button>Click Here To Copy The Div Above!</button> <span id='success'>Success!</span> 

 #copy{ height: 100px; width: 200px; padding: 3px; margin-bottom: 5px; border: 1px solid black; border-radius: 6px; } #success{ color: rgba(84,240,84,1); } 

 $(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 }); }); }); 

Answer 1

I agree with all the comments above, but one thing you can try ....

  $("button").click(function () {/*bind zclip to the button on click*/ $(this).zclip({ path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf", copy: copyData, afterCopy: afterCopyFunction, clickAfter: false }); }); 

Using $ (this) ...., you only bind the button with the mouse button to the zclip constructor. When you use $ ("button") ... you invoke the zclip constructor on each button on the page every time one button is clicked.