clipboardjs copy functionality is not working

Question

After the Ajax response the click event is working.

But the clipboardjs copy functionality is not working. How can I trigger the clipboardjs copy functionality?

$.ajax({
    cache: false,
    type: "POST",
    url: "http://www.example.com/",
    data: dataarray,
    success: function(data){
        jQuery('#copy-button').click();
    });

HTML:

<input type="button" id="copy-button" data-clipboard-text="Copy Link" 
       name="Copy Link"  value="Copy Link" />

Answer 1

Try this code:

jQuery(document).on('click', '#copy-button', function(event) {

    //your code here

}

Answer 2

If you want to manually fire the click event, you'll want to use:

$('#copy-button').trigger("click");

If you're looking to write a click event handler, you'll want to use:

$('#copy-button').click(function() {
    // Do some work
});

Answer 3

It seems like you want to copy dynamically added content after the Ajax call. You can use https://clipboardjs.com/ First of all, initialize Clipboard Js on Document.Ready()

var clipboard = new ClipboardJS("#copy-button", {
    container: document.getElementById('copy-button')
 });
 clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    e.clearSelection();
 );
 clipboard.on('error', function(e) {
    console.error('Action:', e.action);
     console.error('Trigger:', e.trigger);
});

Post initializing Clipboard on your button, If you want to include dynamic content just add that or you can also use static value which is 'Copy Link' in your case.

$.ajax({
    cache: false,
    type: "POST",
    url: "http://www.example.com/",
    data: dataarray,
    success: function(data){
        $('#copy-button').attr('data-clipboard-text', 'dynamic-content');
        $('#copy-button').trigger('click');
});