ZeroClipboard 的按钮不可点击答案

【问题标题】：ZeroClipboard's buttons are not clickableZeroClipboard 的按钮不可点击
【发布时间】：2014-09-11 20:49:46
【问题描述】：

我正在尝试从他们的 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 在那里，但它们不是按钮，它们不可点击。结果，没有文本被复制到剪贴板。

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

【问题讨论】：

标签： javascript jquery html zeroclipboard

【解决方案1】：

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

尝试像这样获取元素。

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

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

【讨论】：