zClip -如何在一次点击按钮后添加、触发、删除zClip？

Question

将.zclip()附加到按钮，然后启动它，然后删除.zclip()的最好方法是什么？这听起来很简单，但我不能让它合作。我有一个有许多按钮的页面，一些可以直接访问，一些按钮可以通过各种手风琴和选项卡访问。许多复制目标都包含动态数据，其中一些是通过ajax插入的。此外，许多部分都是可折叠的。如果关闭该部分时，.zclip()附加到按钮的flash覆盖显示，则会导致动画出现毛刺。

我试着用几种不同的方法来解决这个问题：

附加.zclip()所有按钮元素，然后每隔一段时间刷新页面。虽然它确实捕获了动态数据，但它的性能很糟糕。

根据mouseenter和mouseleave事件以及mouseover和mouseout附加和删除.zclip()。当以这种方式附加时，所有事件每秒都会触发多次，导致多个flash overlay被绑定到一个按钮。

基于.hover()和.hoverIntent()的.zclip()的附加和删除。虽然这比上面的尝试表现得更好，并捕获了动态数据，但事件的触发方式仍然很多。我已经尝试在父节上执行.hover()，并将.zclip()附加到该节中的所有按钮。这是可行的，但它的性能很糟糕。

我相信这个问题有一个简单的解决方案，但我就是想不出来。我可以通过.click()绑定.zclip()，它会附加到一个按钮上。我可以通过.zclip()的afterFunction参数删除它。我想不出如何将额外的click事件传递给按钮，并在附加.zclip()后触发它。它可以工作，但必须单击该按钮两次。一次激活它，一次发射并移除它。我在想，也许额外的click事件需要发送到flash overlay，而不是再次发送到按钮。也许有人能给我指出正确的方向？

zClip Homepage

jsFiddle of 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

我同意上面所有的评论，但有一件事你可以试一试……

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

通过使用$(This)...，您只能将当前单击的按钮绑定到zclip构造函数。当你使用$(“button”)时，每次点击一个按钮，你就会在页面上的每个按钮上调用zclip构造函数。