Copy string to clipboard initiated by click on injected element in JavaScript

Question

Further to this question: Copy to clipboard with jQuery/js in Chrome

The code from the above question works perfectly for copying a string to clipboard with JavaScr

Answer 1

Use e.originalEvent.clipboardData to get original event, and not jQuery event object

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