Question

我正在尝试从他们的github页面获取ZeroClipboard的演示，但我遇到了几个问题。我已经研究了几种可能性，但我根本找不到问题。

以下是直接从其github页面复制的代码：

<html>
  <head>
    <style type="text/css">
      .clip_button {
        text-align: center;
        border: 1px solid black;
        background-color: #ccc;
        margin: 10px;
        padding: 10px;
      }
      .clip_button.zeroclipboard-is-hover { background-color: #eee; }
      .clip_button.zeroclipboard-is-active { background-color: #aaa; }
    </style>
  </head>
  <body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="ZeroClipboard.js"></script>

    <div class="clip_button">Copy To Clipboard</div>
    <div class="clip_button">Copy This Too!</div>

    <script type="text/javascript">
      var client = new ZeroClipboard( $('.clip_button') );

      client.on( 'ready', function(event) {
        // console.log( 'movie is loaded' );

        client.on( 'copy', function(event) {
          event.clipboardData.setData('text/plain', event.target.innerHTML);
        } );

        client.on( 'aftercopy', function(event) {
          console.log('Copied text to clipboard: ' + event.data['text/plain']);
        } );
      } );

      client.on( 'error', function(event) {
        // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
        ZeroClipboard.destroy();
      } );
    </script>
  </body>
</html>

以下是我的目录的屏幕截图：

http://puu.sh/bv6oA/959b37eefc.png

当我加载页面时，div就在那里但它们不是按钮而且它们不可点击。因此，没有文本被复制到剪贴板。

有什么想法吗？非常感谢任何帮助！

Answer 1

ZeroClipboard只接受普通的DOM元素，而不是jQuery。

尝试获取这样的元素。

      var client = new ZeroClipboard( $('.clip_button')[0] );

您还可以查看zClip，一个jQuery ZeroClipboard插件。

ZeroClipboard的按钮不可点击

1 个答案: