Dynamically Loading ZeroClipboard

Question

Using ZeroClipboard - the 'load' callback is called successfully, but clicking on the 'copy-button' element doesn't cause the 'complete' callback to fire.

JS:

var script = document.createElement('script'), loaded;
script.setAttribute('src', "/static/ZeroClipboard.js");
script.onreadystatechange = script.onload = function() {
    if (!loaded) {
        console.log("Executing ZeroClipboard load callback");

        var clip = new ZeroClipboard(
            document.getElementById('copy-button'),
            {moviePath: '/static/ZeroClipboard.swf',
             allowScriptAccess: "always"}  // allow cross-domain swf load
            );

        clip.on('complete', function(client, args) {
            console.log('ZeroClipboard: copied text to clipboard: ' + args.text );
        });
        clip.on('load', function(client) {
            console.log('ZeroClipboard: clip loaded');
        });
    }
    loaded = true;
};
document.getElementsByTagName('head')[0].appendChild(script);

HTML:

<button class="embed-copy" id="copy-button" data-clipboard-text="some old copied text">Copy</button>

How can I dynamically load ZeroClipboard and successfully fire the 'complete' event (copying text to the clipboard)?

Answer 1

Nothing in the above code is wrong. It turns out that the invisible swf that ZeroClipboard creates to capture clicks was being created successfully, but at the wrong position. This is due to the button being positioned via css transforms, and is a bug in ZeroClipboard itself. Hopefully this pull request will be merged soon.

For now, I just manually applied the patch (8 lines or so) to the version of ZeroClipboard I'm using.

For reference this affects ZeroClipboard v1.2.0-beta.1