Question

在我正在构建的一个简单的Flask应用程序中，我有一个端点/视图，其中包含一个关键字搜索查询字段（以及通过AJAX调用插入的查询结果）。

当用户单击“提交”按钮时，将生成带有关键字的AJAX POST请求，服务器将使用一系列列表进行响应，每个列表都是一个搜索结果，其中包含单个多媒体文件资产标题，说明和mp4 URL链接。

多媒体数据的这些小“数据包”通过Javascript迭代，作为页面中AJAX过程的一部分，然后通过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);

在页面上，当用户单击名为“获取资产数据”的按钮时，会创建一个Bootstrap覆盖元素，其中包含一个名为“复制源文件URL”的按钮，该按钮应该将作为值插入的文件URL复制到通过Clipboard.js

的data-clipboard-text元素

看起来像这样：

在Chrome中检查渲染/插入的HTML和JS代码，这就是我所看到的：

Copy Source File Url按钮不执行任何操作，它不会将文件URL复制到剪贴板，即使我插入alert()来测试函数，也没有任何反应。

为什么Clipboard.js在这里没有按预期工作？我可以在页面上直接设置HTML和JS代码时实现此功能（即不使用JS innerHTML将剪贴板js插入到DOM中的代码块），但似乎无法使用该方法我上面概述了。

使用AJAX了解不起作用的Clipboard.js实现

0 个答案: