javascript - AJAX を使用した機能しない Clipboard.js の実装を理解する

Question

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

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

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

for(i = 0; i < serverResponseBody.length; i++){
            var vidPacket = JSON.stringify(serverResponseBody[i]);

            // converting to JSON object so we can extract values of keys in each packet
            var vidPacketMod = JSON.parse(vidPacket);
            console.log(vidPacketMod);
            console.log(vidPacketMod["description"]);

            var idxID = i;
            var desc = vidPacketMod["description"];
            var name = vidPacketMod["name"];
            var url = vidPacketMod['url'];
            var thumbnail = vidPacketMod['thumbnail'];
            var tags = vidPacketMod['tags'];

            var div = document.createElement('div');


            div.innerHTML += '<div class="list-group" id='+idxID+'><h4 class="list-group-item-heading">'+name+'</h4><img src='+thumbnail+' height="90" width="160"><p class="list-group-item-text">'+desc+'</p><button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal--'+idxID+'">Get Asset Data</button><div class="modal fade" id="myModal--'+idxID+'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">'+name+'</h4></div><div class="modal-body"><p><b>DESCRIPTION: </b>'+desc+'</p><p><b>TAGS: </b>'+ tags+'</p><button class="btn" data-clipboard-text='+url+'>Copy Source File Url</button><script src="/static/clipboardJS/clipboard.min.js"><\/script><script>var clipboard = new Clipboard(".btn"); clipboard.on("success", function(e) { console.log(e); }); clipboard.on("error", function(e) { console.log(e);});<\/script></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div></div>';


            vidInsert.appendChild(div);

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 に挿入しない場合) にこの機能を実装することはできますが、このアプローチでは機能しないようです。上記で概説しました。