clipboard.js: Clipboard not defined

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.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 17 (3 by maintainers)

Most upvoted comments

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

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.😌
Good luck!

Hi,

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

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

or

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

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

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

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’.

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

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 … )