ZeroClipboard 在弹出页面的按钮上不起作用答案

【问题标题】：ZeroClipboard doesn't work on popup page's buttonZeroClipboard 在弹出页面的按钮上不起作用
【发布时间】：2014-11-10 22:59:50
【问题描述】：

我想知道是否有任何方法可以让 ZeroClipBoard 在弹出页面的按钮上工作？到目前为止，我有以下代码将带来一个弹出页面，该弹出页面是从 php 文件中调用的，包括 2 个按钮。

第一页代码：

<html>
<head>
<title>test</title>
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="myDiv">This is the content to get copied to the text area and then to clipboard</div>
<button id="testButton" data-clipboard-target="myDiv"><b>Copy To Clipboard</b></button>
<!--<script type="text/javascript">
var clicks = 0;
</script>-->
<button onclick="launchPopUp('', '', 700, 'embedCode.php');">test button</button>
<!--<script>
function test123(){
if(clicks>=1){
alert(clicks);
var client = new ZeroClipboard( document.getElementById('copyAll') );
}
}
</script>-->
</body>
<script>
var client1 = new ZeroClipboard( document.getElementById('testButton') );
</script>

我已经尝试使用 ZeroClipboard 在我的第一页上为“testButton”按钮制作“复制到剪贴板”。

我的第二页代码将是弹出页面的内容：

<?php 
session_start();

$userName =  "asdfbsadf";//$_SESSION['user_name'];
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="copiedContent" style="border: 2px solid; margin: 30px 20px 10px 20px; padding: 4px 3px 5px 3px;">
Here will be the content and <?php echo $userName?> that be copied to the clipboard
</div>
<button id="copyAll" data-clipboard-target="copiedContent" style="float: right; margin-right: 20px;">Copy All</button>

<button style="float: right;" onclick="whatIsThis()">What Is This?</button>

<script>
function whatIsThis(){
    alert("This is...");
}
</script>
</body>
<!--<script language="JavaScript">
var client = new ZeroClipboard( document.getElementById('copyAll') );
</script>-->
</html>

"launchPopup()" 函数是从一个名为 popUp2.0.js 的开源中调用的，如果需要那个 js 文件，我会发布，但那个是 170 行代码。

上面的注释掉代码是我试过的。我试过添加“var client = new ZeroClipboard(document.getElementById('copyAll'));”对于我的弹出页面的 copyAll 按钮到第二页，它不起作用；我尝试将其添加到第一页，该按钮也不起作用。

我发现如果代码“var client = new ZeroClipboard(document.getElementById('copyAll'));”在按钮之后调用，这将起作用；但我已经尝试了所有我知道的将它放在按钮之后，当我运行页面并单击测试按钮以弹出弹出页面时，我发现代码“var client = new ZeroClipboard(document.getElementById('copyAll ') );"当我检查元素时，总是在按钮之前调用。

我想知道我是否有一个名为 test123() 的函数，有什么方法可以在单击按钮并显示整个弹出页面后运行此函数，这样我就可以在弹出窗口后运行 Javascript页面显示，并使 copyAll 按钮工作？

或者我认为这是错误的方式并且我的代码太糟糕了？如果有任何方法可以使它工作，我将不胜感激，因为这是我第一次使用 ZeroClipboard。

【问题讨论】：

一切都取决于什么是launchPopUp
您的问题不清楚。请删除不需要描述的任何内容并尽可能具体。
@epascarello 问题已更新。 launchPopUp() 的代码有 170 行。如果你想看到，我很乐意在我的帖子中更新。
@greggreg 整个问题已更新，将提供更具体的代码和解释。请指教。

标签： javascript php jquery html zeroclipboard

【解决方案1】：

您是否尝试过在 onclick 事件中调用第二个函数？

<button onclick="launchPopUp('', '', 700, 'embedCode.php'); test123();">test button</button>

【讨论】：

是的，我试过了，它不起作用。这将在弹出页面加载之前调用 test123()。