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.

moth on Nov 11, 2017

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!

ghost on Aug 29, 2017

Hi,

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

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

asfarley on Mar 18, 2019

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

Jolly-Pirate on Dec 1, 2016

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

wdburgdorf on Dec 1, 2016