将 class 分配给 space 时，clipboardjs 不起作用

Question

我已经成功设置了 clipboardjs。现在我正在为它添加一个框架用于设计目的。

只有当我向名为 "small button" 的按钮添加新的 class 时一切正常，然后它就不再起作用了。在我使用按钮之前，它会很好用。

我认为有一个简单的答案，但我认为我对这个问题的看法是错误的。

这是无效的例子：

< script >
  var clipboard = new Clipboard('.small button');
clipboard.on('success', function(e) {
  console.log(e);
});
clipboard.on('error', function(e) {
  console.log(e);
}); < /script>

<div class="result">
  <label>E-Mail Code:</label>
  <p>
    <textarea id="emailcode">
      <?=$image;?>
    </textarea>
  </p>
  <p>
    <button class="small button" data-clipboard-action="copy" data-clipboard-target="#emailcode">
      Copy to clipboard
    </button>
  </p>
  <label>Digistore24 Code:</label>
  <p>
    <textarea id="ds24code">
      <?=$ds24;?>
    </textarea>
  </p>
  <p>
    <button class="small button" data-clipboard-action="copy" data-clipboard-target="#ds24code">
      Copy to clipboard
    </button>
  </p>
</div>

这是工作示例：

< script >
  var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
  console.log(e);
});
clipboard.on('error', function(e) {
  console.log(e);
}); < /script>

<div class="result">
  <label>E-Mail Code:</label>
  <p>
    <textarea id="emailcode">
      <?=$image;?>
    </textarea>
  </p>
  <p>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#emailcode">
      Copy to clipboard
    </button>
  </p>
  <label>Digistore24 Code:</label>
  <p>
    <textarea id="ds24code">
      <?=$ds24;?>
    </textarea>
  </p>
  <p>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#ds24code">
      Copy to clipboard
    </button>
  </p>
</div>

Answer 1

将双 class 添加到您的按钮，如下 post 所示。首先你 post "btn" 然后用 space 来自框架的相关 css。

<button class="btn small button" data-clipboard-action="copy" 
data-clipboard-target="#ds24code">

Answer 2

初始化剪贴板库时传递的参数是一个CSS选择器，所以你的代码

new Clipboard('.small button')

将在 small class 的标签中找到 button 个标签。你想要的大概是

new Clipboard('.small.button')

这将找到同时具有 small 和 button class 的标签。

将 class 分配给 space 时，clipboardjs 不起作用

clipboardjs does not work when assigning class with space

html

javascript

css

php

clipboard.js