diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 4907d87301f57..3a392324d04c4 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -55,7 +55,7 @@
 					{{end}}
 				</div>
 				<a download class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.download_file"}}" href="{{$.RawFileLink}}">{{svg "octicon-download"}}</a>
-				<a id="copy-content" class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}"{{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy"}}</a>
+				<a class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}" data-global-click="onCopyContentButtonClick" {{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy"}}</a>
 				{{if .EnableFeed}}
 				<a class="btn-octicon" href="{{$.RepoLink}}/rss/{{$.RefTypeNameSubURL}}/{{PathEscapeSegments .TreePath}}" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
 					{{svg "octicon-rss"}}
diff --git a/web_src/js/features/copycontent.ts b/web_src/js/features/copycontent.ts
index 4bc9281a35e4f..3961a8d7ac9c7 100644
--- a/web_src/js/features/copycontent.ts
+++ b/web_src/js/features/copycontent.ts
@@ -2,21 +2,19 @@ import {clippie} from 'clippie';
 import {showTemporaryTooltip} from '../modules/tippy.ts';
 import {convertImage} from '../utils.ts';
 import {GET} from '../modules/fetch.ts';
+import {registerGlobalEventFunc} from '../modules/observer.ts';
 
 const {i18n} = window.config;
 
 export function initCopyContent() {
-  const btn = document.querySelector('#copy-content');
-  if (!btn || btn.classList.contains('disabled')) return;
-
-  btn.addEventListener('click', async () => {
-    if (btn.classList.contains('is-loading')) return;
+  registerGlobalEventFunc('click', 'onCopyContentButtonClick', async (btn: HTMLInputElement) => {
+    if (btn.classList.contains('disabled') || btn.classList.contains('is-loading')) return;
     let content;
     let isRasterImage = false;
     const link = btn.getAttribute('data-link');
 
     // when data-link is present, we perform a fetch. this is either because
-    // the text to copy is not in the DOM or it is an image which should be
+    // the text to copy is not in the DOM, or it is an image which should be
     // fetched to copy in full resolution
     if (link) {
       btn.classList.add('is-loading', 'loading-icon-2px');
@@ -40,7 +38,7 @@ export function initCopyContent() {
       content = Array.from(lineEls, (el) => el.textContent).join('');
     }
 
-    // try copy original first, if that fails and it's an image, convert it to png
+    // try copy original first, if that fails, and it's an image, convert it to png
     const success = await clippie(content);
     if (success) {
       showTemporaryTooltip(btn, i18n.copy_success);