sha*_*nth 3 jquery copy zeroclipboard jquery-dialog
我在我的页面中使用jquery ui对话框,令人惊讶的是,zeroclipboard复制到剪贴板功能在jquery对话框中不起作用.
这是我的整个代码......
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet"
type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://davidwalsh.name/dw-content/ZeroClipboard.js"></script>
<script type="text/javascript">
$(function(){
$('#ex1').click(function(){
var div = $('#div1');
div.dialog(
{
title:'Dialog1',
width: 300,
height: 150,
closeOnEscape: false
});
});
});
function toClipboard(me, msg_id) {
ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
//clip.setHandCursor( true );
var txt = $("#msg_p_span_"+msg_id).html();
console.log("Text: "+txt);
clip.addEventListener('mousedown',function() {
clip.setText(txt);
console.log("Copied");
});
clip.addEventListener('complete',function(client,text) {
alert('copied: ' + text);
});
clip.glue(me);
}
</script>
<title>jQuery UI dialog extra demo</title>
</head>
<body>
<span id="msg_p_span_1" style="display:none;">Testing the clipboard copy 1.</span>
<span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 1)">Copy</span>
<button id="ex1">Launch dialog</button>
<div id="div1" style="display:none;">
<p style="padding: 10px 3px; font-size: 12px;" id="msg_p_2">
<span id="msg_p_span_2">Testing the clipboard copy 2.</span>
<span style="float: right; width: 25px; margin-right: 10px;">
<span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 2)">Copy</span>
</span>
</p>
</div>
</body>
</html>
如果我点击第一个"复制"链接,文本将被很好地复制并生成警报.但是当我启动jquery对话框并单击其中的"复制"链接时,不会复制文本.
可能有人可以使用上面的代码(复制粘贴)重现问题并找到它.
注意:我正在关注Davidwalsh网站的核心示例