在Shiny应用中使用clipboard.js复制时报addEventListener空值错误如何解决

报错的核心原因是ClipboardJS初始化时，目标按钮的DOM元素尚未完成渲染：你将初始化脚本放在了<head>标签内，浏览器加载执行这段脚本时，页面主体的按钮元素还没有生成，.clipboardButton选择器返回空值，导致初始化调用抛出addEventListener绑定对象为空的错误。

任选以下任意一种方案即可：

方案1：监听DOM加载完成事件后初始化 #

将初始化脚本移动到页面底部，同时包裹在DOMContentLoaded事件回调中，确保所有静态DOM元素加载完成后再执行初始化逻辑，修改后的完整代码如下：

library(shiny.semantic)

ui <- semanticPage(
    tags$head(
        tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js")
    ),
    
    action_button(input_id="myButton",
                  class = "clipboardButton",
                  label = "Click Me !",
                  `data-clipboard-text` = "Clipboard copied !"
    ),
    text_input("text",
               placeholder="paste here to check"
    ),
    tags$script(HTML("
      document.addEventListener('DOMContentLoaded', function() {
        new ClipboardJS('.clipboardButton');
      });
    "))
)

server <- function(input, output, session){}

shinyApp(ui, server)

方案2：使用Shiny专属加载事件（适配动态渲染场景） #

如果你的页面存在Shiny动态渲染的元素，使用Shiny内置的shiny:connected事件更稳妥，能确保Shiny初始渲染逻辑全部完成后再执行初始化：
只需将上述代码中最后的tags$script部分替换为以下内容即可：

tags$script(HTML("
  $(document).on('shiny:connected', function() {
    new ClipboardJS('.clipboardButton');
  });
"))

修改完成后运行应用，点击按钮后粘贴到下方输入框，即可看到成功复制的Clipboard copied !文本，浏览器控制台不会再抛出对应类型错误。

内容的提问来源于stack exchange，提问作者6PO0222