問題タブ [clipboard.js]

からテキストをコピーするためにclipboard.jsを使用していますtextareaが、それは正常に機能していますが、「コピーされました!」というツールチップを表示したいと考えています。Web サイトに示されている例のようにコピーに成功した場合。

ツールチップを表示せずに動作する例を次に示します: https://jsfiddle.net/5j50jnhj/

HTML + Javascript の結果に対して「クリップボードにコピー」ボタンを機能させるにはどうすればよいですか? さまざまな投稿を読んでこれを試しましたが、うまくいきません：

目標は、電子メール署名ツールを作成することです。フィールドに入力し、コピー ボタンを押して、電子メール クライアントの署名作成ツールに貼り付けます。

完全なコードは次のとおりです: https://jsfiddle.net/t7y5uq89/

(1 つのファイルに HTML と Javascript が混在していることをあらかじめお詫びします。私は独学のコーダーです)

もともと、私はそれをうまく機能させていました。

それから私はこれをしました、そして今私はそれを働かせることができません

ClipboardField.js

Field.js

コードをClipboardFieldからFieldに取り出すと、機能します。ほとんどの場合、親コンポーネントで document.getElementById() を使用して子で何かを見つけるにはどうすればよいですか?

彼らの例:

https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18

https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17

https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19

私が構築している単純な Flask アプリケーションには、キーワード検索クエリ フィールド (および AJAX 呼び出しを介して挿入されたそのクエリの結果) を備えたエンドポイント/ビューがあります。

ユーザーが [送信] ボタンをクリックすると、キーワードを含む AJAX POST 要求が作成され、サーバーは一連のリストで応答します。各リストは、個々のマルチメディア ファイル アセットのタイトル、説明、および mp4 URL リンクを含む検索結果です。

マルチメディア データのこれらの小さな「パケット」は、ページ内の AJAX プロセスの一部として Javascript を介して繰り返され、次のinnerHTMLように DOM に挿入されます。

data-clipboard-textこのページで、ユーザーが「Get Asset Data」というボタンをクリックすると、値として要素に挿入されたファイル URL をコピーする「Copy Source File URL」というボタンを含む Bootstrap オーバーレイ要素が作成されます。Clipboard.js

次のようになります。

Chrome でレンダリング/挿入された HTML および JS コードを調べると、次のように表示されます。

ボタンは何もせず、Copy Source File Urlファイル URL をクリップボードにコピーせずalert()、機能をテストするために を挿入しても何も起こりません。

ここで Clipboard.js が期待どおりに機能しないのはなぜですか? ページに HTML および JS コードを直接設定する場合 (つまり、JS innerHTML を使用してクリップボード js を含むコード ブロックを DOM に挿入しない場合) にこの機能を実装することはできますが、このアプローチでは機能しないようです。上記で概説しました。