【JS】クリック１回目のイベントだけ発生しない【Clipboard.js】

Question

１回目のクリックの際にコピーもツールチップ表示もできないのですが、２回目以降だと出来ます。
原因が分かりません。
copyUrl自体は１回目でも呼ばれています。

%span.clip.clipboard{:onclick => "cpyUrl(this)", ':data-clipboard-text' => "user.url"}

:javascript
  function cpyUrl(select) {
    var form;
    form = new Form;
    form.hideFieldset()
    clipboard = new Clipboard(select)
    clipboard.on('success', function(e) { // ここがクリック１回目だと動作しない
      return form.showTooltip($(e.trigger), 'copied!');
    });
    $('.clipboard').on('mouseleave', function() {
      $(this).attr('class', 'clip clipboard');
      return $(this).removeAttr('aria-label');
    });
    form.updateChildrenSelectOptions($('.select-parent'))
  }

もし何かお分かりの方、いらっしゃいましたら教えて頂けますと幸いです。
よろしくお願いいたします。

Answer 1

copyUrl自体は１回目でも呼ばれています。

copyUrl自体がコピーやツールチップ表示を実行するわけではなく、new Clipboardされたオブジェクトがそれらの仕事を行っています。

なので、1回目のクリックでは「イベントのセット」だけが行われて、2回目以降でようやく反応します。

copyUrlの中身はクリックのタイミングではなく、事前に実行しておくのが適切です。

Comments

[hassan2019]

ご回答ありがとうございます。
今回
```
%span.clip.clipboard{:onclick => "cpyUrl(this)", ':data-clipboard-text' => "user.url"}
```
の部分は、実は動的に生成され、複数存在するDOMになります。(user.urlが全て異なってくる)
>copyUrlの中身はクリックのタイミングではなく、事前に実行しておくのが適切です。
とのことでしたので、:onclickを:onloadや:onreadyに変えてみましたが、何も反応しなくなりました。
どのようにコーディングすべきでしょうか？
教えて頂けますと、大変ありがたいです。

[maisumakun]

> どのようにコーディングすべきでしょうか？

$(function(){})でページロード時に実行するようにして、その中で$('[data-clipboard-text]').eachのようにして対象のエレメントを拾って1つずつnew Clipboardを実行していきましょう。

[hassan2019]

ご回答いただきありがとうございました。
その方針でやってみます。