zClip - Как добавить, запустить, затем удалить zClip одним нажатием кнопки?

Question

Какой будет лучший способ прикрепить .zclip() на кнопку, затем выстрелить, затем удалить .zclip()? Это звучит достаточно просто, но я не могу заставить его сотрудничать. У меня есть страница с множеством кнопок, некоторые из которых доступны напрямую, некоторые кнопки доступны через различные аккордеоны и вкладки. Многие из целей копирования содержат динамические данные, некоторые из которых вставляются через ajax. Также многие секции являются разборными. Если вспышка наложена .zclip() кнопка присоединяется к кнопке, присутствует при закрытии раздела, затем вызывает сбой анимации.

Я попытался подойти к этому несколькими различными способами:

Прикрепление .zclip() все элементы кнопки, а затем обновить страницу с заданным интервалом. Хотя он действительно захватывает динамические данные, его производительность ужасна.

Присоединение и удаление .zclip() основанный на mouseenter а также mouseleave события, а также mouseover а также mouseout, При подключении таким образом все события запускаются много раз в секунду, в результате чего несколько наложений вспышки будут привязаны к одной кнопке.

Присоединение и удаление .zclip() основанный на .hover() а также .hoverIntent(), Хотя это ведет себя лучше, чем приведенная выше попытка, и захватывает динамические данные, события дают о себе знать. Я пытался сделать .hover() на родительском разделе и прикрепление .zclip() для всех кнопок в этом разделе. Это работает, но его производительность ужасна.

Я убежден, что есть простое решение для этого, но я просто не могу понять это. Я могу связать .zclip() с помощью .click() и он прикрепится к кнопке. Я могу удалить .zclip() через его afterFunction параметр. Я не могу понять, как пройти дополнительный click событие на кнопку и огонь .zclip() однажды его прикрепили. Это будет работать, но кнопка должна быть нажата дважды. Один раз, чтобы активировать его, тот, чтобы выстрелить и удалить его. Я думал, может быть, дополнительный click событие должно быть отправлено на флэш-оверлей, а не на кнопку снова. Возможно, кто-то может указать мне правильное направление?

Домашняя страница zClip

jsFiddle этого кода:

<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 для каждой кнопки на странице каждый раз, когда нажимаете одну кнопку.