通过单击注入的元素将javascript复制到剪贴板

继这个问题：
使用Chrome中的jQuery / js复制到剪贴板

上面问题的代码非常适合用javascript将字符串复制到剪贴板，但我需要触发用户点击注入元素的过程。 出于某种原因，如果注入元素，代码将无法工作。 有人可以让我直截了当吗？

在下面的代码示例中，我添加了一个红色？ 按钮并将其添加到身体上。 请注意，单击它不会将所需的文本复制到剪贴板。 倒q’hy？ 有什么想法吗？
_{（请注意，我在jQuery中添加了我的位作为个人偏好）}

jsFiddle演示

var elem = document.getElementById('test'); var elem2 = document.getElementById('test2'); var elem3 = document.getElementById('test3'); elem.onmouseup = function () { document.execCommand('copy'); } elem2.addEventListener('copy', function (e) { e.preventDefault(); if (e.clipboardData) { e.clipboardData.setData('text/plain', 'custom content'); } else if (window.clipboardData) { window.clipboardData.setData('Text', 'custom content'); } }); elem3.onclick = function () { document.execCommand('copy'); } elem3.addEventListener('copy', function (e) { e.preventDefault(); if (e.clipboardData) { e.clipboardData.setData('text/plain', 'bonk custom contentt'); } else if (window.clipboardData) { window.clipboardData.setData('Text', 'bonkcustom content from click'); } }); $('body').prepend('
?
'); $(document).on('click', '#test4', function(e){ document.execCommand('copy'); }); $(document).on('copy', '#test4', function(e){ e.preventDefault(); if (e.clipboardData) { e.clipboardData.setData('text/plain', 'Over the rainbox'); } else if (window.clipboardData) { window.clipboardData.setData('Text', 'Rainbox'); } }); 

 #test4{display:inline-block;background-color:tomato;font-size:1.2rem;padding:0 5px;border-radius:3px;cursor:pointer;} 

  
Select text, it'll copy on mouse up
 
Copy text using ctrl-c
 
Click here to copy text
 
 

Answer 1

使用e.originalEvent.clipboardData获取原始事件，而不是jQuery事件对象

 var elem = document.getElementById('test'); var elem2 = document.getElementById('test2'); var elem3 = document.getElementById('test3'); elem.onmouseup = function () { document.execCommand('copy'); } elem2.addEventListener('copy', function (e) { e.preventDefault(); if (e.clipboardData) { e.clipboardData.setData('text/plain', 'custom content'); } else if (window.clipboardData) { window.clipboardData.setData('Text', 'custom content'); } }); elem3.onclick = function () { document.execCommand('copy'); } elem3.addEventListener('copy', function (e) { e.preventDefault(); if (e.clipboardData) { e.clipboardData.setData('text/plain', 'bonk custom contentt'); } else if (window.clipboardData) { window.clipboardData.setData('Text', 'bonkcustom content from click'); } }); $('body').prepend('
?
'); $(document).on('click', '#test4', function(e){ document.execCommand('copy'); }); $(document).on('copy', '#test4', function(e){ e.preventDefault(); if (e.originalEvent.clipboardData) { e.originalEvent.clipboardData.setData('text/plain', 'Over the rainbox'); } else if (window.clipboardData) { window.clipboardData.setData('Text', 'Rainbox'); } }); 

 #test4{display:inline-block;background-color:tomato;font-size:1.2rem;padding:0 5px;border-radius:3px;cursor:pointer;} 

  
Select text, it'll copy on mouse up
 
Copy text using ctrl-c
 
Click here to copy text
 
 

Answer 2

您需要on事件上创建动态创建的元素。 试试这个：

 $('#test4').on("click", function() { //Your copy code here });