Clipboard.js: Clipboard not defined

[wdburgdorf]

This is my code, nothing else:

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
    new Clipboard('.cbcopy');
</script>

Result: Uncaught ReferenceError: Clipboard is not defined

EDIT: Meanwhile I found the hidden complete example:
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18
Result is the same: Clipboard is not defined

EDIT 2: Now I found that the error only occurs when the code is loaded via AJAX. If called directly, it works. So maybe it's no bug at all and just a matter of correct code placement. Sorry if it's just my fault.

[diogoca]

Hi Lausianne,

Here the same... loading via
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js" async></script>

[zenorocha]

Everything seems to be working fine over here, please share a JSFiddle with a reproducible bug.

[wdburgdorf]

Have you tried via AJAX? I wouldn't know how to test that with JSFiddle.

[zenorocha]

I haven't because a reproducible scenario has not been provided. If someone else has the same issue and has the ability to reproduce it, please share with us so we can evaluate this problem.

[lauff]

I am having the same problem.
The issue is closed, but I can't find the solution...
Thanks Markus

[zenorocha]

Can you provide a JSFiddle that reproduces your problem @lauff?

[wdburgdorf]

I assume that my original error was because of AJAX: code does not run in browser, but on server, so JS is not executed. My solution was to move clipboard.js into the file that does the AJAX call rather than the code that is called. (Seems rather obvious to me now ... )

[Jolly-Pirate]

lausianna, have you tried to load clipboard.min.js at the end of your page, after the ajax call is made?

[wdburgdorf]

Yes, exactly. Otherwise new Clipboard('.cbcopy'); will find nothing. (I'd need to check the code to find out for sure.)
But two conditions are for sure:

1. JS does not run on server (unless, perhaps, with node.js)
2. The object to be clicked for Clipboard must exist before the script is called

[Jolly-Pirate]

lausianna, I use AJAX a lot, and I do encounter this recurrent problem of JS not being "seen" by the html code returned by the AJAX call. The solution is to run the JS when the DOM is ready. So try this (requires jquery of course):

$(document).ready(function () {
    new Clipboard('.cbcopy');
});
// or shorthand
$(function () {
    new Clipboard('.cbcopy');
});

edit: check this, it can be helpful http://stackoverflow.com/questions/16062899/jquery-doesnt-work-after-content-is-loaded-via-ajax

[lauff]

Can you provide a JSFiddle that reproduces your problem @lauff?

let's see, I have a bigger dynamically created page - I will try

[ghost]

Howdy folks.
My app was working in development but not in production.
My solution was to link
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
instead of linking to my local folders copy in node_modules/dist etc.
Seemed to do the trick.:relieved:
Good luck!

[ottz0]

Same isssue, can only run using the CDN and not from node_modules folder

[moth]

Same for me. Can only run using the CDN and not from node_modules folder.

[modelesque]

Surprised this still isn't fixed. I couldn't get version 2.0.0 to work loaded via AJAX, then instantiating Clipboard after AJAX finished. My solution was to revert back to version 1.7.1 and now it works. I'm using loadjs to call the node_modules file, then on success I instantiate Clipboard and it works great.

[albabameem]

In case if anyone's still struggling to make it work with requirejs, here's how it's done:

1) Your requirejs config file should look like this:

"use strict";
require.config({
    baseUrl: '',
    paths: {
        'jquery': 'vendor/jquery/jquery.min',
        'clipboard': 'vendor/clipboard/clipboard.min',
        'modules/clipboard': 'js/modules/clipboard',
    },
    shim : {
        'jquery': {
            exports: '$'
        },
        'clipboard': {
            exports: 'ClipboardJS',
            deps: ['jquery']
        },
    },
    priority : ['jquery']
});

In the 'modules/clipboard' file: (Notice the parameters in the function below, you need to pass the constructor as a parameter)

define([
    'jquery',
    'clipboard'
], function ($,ClipboardJS){ //Notice the parameters $ is for jquery plugin and ClipboardJS is for clipboard plugin
    new ClipboardJS('.btn);
});

[asfarley]

Hi,

I seem to be running into this issue (ReferenceError: Clipboard is not defined) using the latest CDN releases:

or

However, if I go back to this version then I don't get the error:

As mentioned by @rswhite7, I tried using the JQuery run-after-loaded recommendation, but it did not work for me; I still got 'ReferenceError: Clipboard is not defined'.