为什么要点两下才有反应呢？

Question

text: <input type="text" name="text" value="copy ok!" id="text"/>
<input type="submit" name="btn_copy" value="复制" id="btn_submit" />
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
var text= document.getElementById("text").value;
clip.setText(text);
clip.glue("btn_submit");
clip.addEventListener( "complete", function(){
    alert("复制成功！");
});
</script> 
利用ZeroClipboard弄的复制粘贴，想变为共用的，上边是对的，下面为什么要点两下才有反应呢？一般要么有反应，要么没反应，百思不得其解！
text: <input type="text" name="text" value="copy ok!" id="text"/>
<input type="submit" name="btn_copy" value="复制" id="btn_submit" onclick="copyToClipboard('text')" />
<script type="text/javascript" src="ZeroClipboard.js"></script><script type="text/javascript">
function copyToClipboard(txt){
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
var text= document.getElementById(txt).value;
clip.setText(text);
clip.glue("btn_submit");
clip.addEventListener( "complete", function(){
    alert("复制成功！");
});
}
</script> 

Answer 1

第一个代码直接运行给button加上事件了第二个点击了才加事件，所以第二次才会执行copy操作了去看glue方法             
clip.glue("btn_submit");

Answer 2

应该在button初始化就加上监听

Answer 3

先调用一下方法,不需要 onclick="copyToClipboard('text')"
copyToClipboard('text',"btn_submit");
function copyToClipboard(txt,id){
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
var text= document.getElementById(txt).value;
clip.setText(text);                   
clip.glue(id);
clip.addEventListener( "complete", function(){
    alert("复制成功！");
});
}

Answer 4

先调用一下方法,不需要 onclick="copyToClipboard('text')"
copyToClipboard('text',"btn_submit");
function copyToClipboard(txt,id){
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
var text= document.getElementById(txt).value;
clip.setText(text);                   
clip.glue(id);
clip.addEventListener( "complete", function(){
    alert("复制成功！");
});
}完胜！！