ZeroClipboard 在第一次点击时不起作用答案

【问题标题】：ZeroClipboard not working on first clickZeroClipboard 在第一次点击时不起作用
【发布时间】：2014-09-01 07:59:20
【问题描述】：

流程总结：我写了一个jsp页面，和一个js文件。 jsp 包括带有可点击区域的表单。当用户点击那里时，js将带有onclick方法的按钮添加到jsp中，如果用户点击该按钮，则应将一些文本复制到剪贴板。

JS给jsp添加按钮：

<button id="copyToClipboard" title="Copy to clipboard" type="button" onclick="shareTransaction($(this))"></button>

JS onclick:

function shareTransaction(e) {
    $('#copyToClipboard').attr('data-clipboard-text',$(location).attr('protocol')+'//'+$(location).attr('host')+'/goblin/'+result);
    var zeroClipboard = new ZeroClipboard($("#copyToClipboard"));
}

在第一次点击中，什么都没有发生。在第二次点击中 - 文本复制成功。

【问题讨论】：

你解决了这个问题吗？

标签： javascript onclick copy clipboard zeroclipboard

【解决方案1】：

您可以尝试在单击按钮之前初始化 ZeroClipboard 对象。

示例代码：

<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.0.0/ZeroClipboard.Core.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.0.0/ZeroClipboard.js"></script>
        <script type="text/javascript">
            function initZc(){
                var button = $("button");
                console.log(button)
                var clip = new ZeroClipboard(button);
                clip.on( 'ready', function(event) {
                    clip.on('copy', function(event) {
                        event.clipboardData.setData('text/plain', "working");
                    });
                } );
            };
            $(document).ready(function(){
                $(document.body).append($("<button>click to copy</button>"));
                initZc();
            });
        </script>
    </head>
    <body>

    </body>
</html>

【讨论】：

它不工作。在创建按钮之前不能进行初始化。初始化 ZeroClipboard 时，它会查找尚未创建的元素 id (#copyToClipboard)
在这种情况下使用 $(document).ready 没有任何区别，因为按钮是在 JavaScript 文件中创建的。不在 html 文件 (jsp) 中。
老兄，我改了示例代码，试试看。（不要将其作为带有 url file:///.... 的本地文件尝试）它在 chrome 中不起作用，请将其放在服务器上。