Understanding non-functioning Clipboard.js implementation with AJAX

问题

In a simple Flask application I'm building, I have an endpoint/view that features a keyword search query field (and the results of that query, inserted via an AJAX call).

When the user clicks Submit button, an AJAX POST request with the keyword is made and the server responds with a series of lists, each of which is a search result that contains an individual multimedia file asset title, description, and mp4 URL link.

These little "packets" of multimedia data are iterated through via Javascript as part of the AJAX process in the page, and then inserted into the DOM via innerHTML like so:

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);

On the page, when the user clicks a button called "Get Asset Data", a Bootstrap overlay element is created that contains a button called "Copy Source File URL" that is supposed to copy the file url inserted as a value into the data-clipboard-text element via Clipboard.js

It looks like this:

Inspecting the rendered/inserted HTML and JS code in Chrome, this is what I see:

The Copy Source File Url button does nothing, it doesn't copy the file URL to the clipboard and even when I insert an alert() to test out the function, nothing happens.

Why is Clipboard.js not working as expected here? I am able to implement this feature when directly setting up the HTML and JS code on a page (i.e. not using JS innerHTML to insert a code block with the clipboard js into the DOM), but cannot seem to get it to work with the approach I've outlined above.

来源：https://stackoverflow.com/questions/37977709/understanding-non-functioning-clipboard-js-implementation-with-ajax