Javascript ZeroClipboard在第一次单击时不工作_Javascript_Onclick_Copy_Clipboard_Zeroclipboard

Javascript ZeroClipboard在第一次单击时不工作

javascript

Javascript ZeroClipboard在第一次单击时不工作,javascript,onclick,copy,clipboard,zeroclipboard,Javascript,Onclick,Copy,Clipboard,Zeroclipboard,流程摘要：我编写了一个jsp页面和一个js文件。jsp包含带有可单击区域的表单。当用户单击该按钮时，js会将带有onclick方法的按钮添加到jsp中，如果用户单击该按钮，则应将一些文本复制到剪贴板 JS将按钮添加到jsp： <button id="copyToClipboard" title="Copy to clipboard" type="button" onclick="shareTransaction($(this))"></button> 在第一次单击中，

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

JS将按钮添加到jsp：

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

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

在单击按钮之前，您可以尝试初始化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时，它会查找未使用$document创建的元素id copyToClipboard。在这种情况下，ready没有区别，因为按钮在JavaScript文件中创建。不是在html文件jsp.Dude中，我更改了示例代码，试试看。不要尝试将其作为带有url的本地文件file:///.... 它在chrome中不起作用，把它放在服务器上。

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