如何使用shinyjs获取可点击<div>元素ID并批量绑定reactiveVal？

优化方案：使用事件委托+Shiny输入绑定 #

直接通过事件委托给父元素绑定一次点击事件，就能处理所有子元素的点击操作，无需为118个元素逐个编写onclick。以下是修改后的完整代码：

library(shiny)

ui <- fluidPage(
  fluidRow(
    column(
      2, offset = 1, h3('List of elements:'),
      HTML(
        '<div class = "periodic-table">
            <div class = "element" style = "cursor: pointer;" id = "Hydrogen"> Hydrogen </div>
            <div class = "element" style = "cursor: pointer;" id = "Helium"> Helium </div>
            <div class = "element" style = "cursor: pointer;" id = "Lithium"> Lithium </div>
            <!-- 其余115个元素 -->
         </div>
         <!-- 添加事件委托的JavaScript -->
         <script>
           document.addEventListener("DOMContentLoaded", function() {
             // 给父元素绑定点击事件
             document.querySelector(".periodic-table").addEventListener("click", function(e) {
               // 确认点击的是目标子元素
               const targetElem = e.target.closest(".element");
               if (targetElem) {
                 // 将子元素ID传递给Shiny的input对象
                 Shiny.setInputValue("selected_element", targetElem.id);
               }
             });
           });
         </script>'
      )
    ),
    column(2, h3('Selected element:'), textOutput('SelectedElem'))
  )
)

server <- function(input, output, session, devMode = TRUE) {
  SelectedElem <- reactiveVal()
  
  # 监听传递过来的选中元素ID，更新reactiveVal
  observeEvent(input$selected_element, {
    SelectedElem(input$selected_element)
  })
  
  output$SelectedElem <- renderText(SelectedElem())
}

shinyApp(ui = ui, server = server, enableBookmarking = "URL")

核心原理说明 #

1. 事件委托：利用DOM事件冒泡机制，只给父元素.periodic-table绑定一次点击事件，所有子元素的点击事件都会冒泡到父元素处理，避免了重复绑定。
2. 目标元素判断：通过e.target.closest(".element")获取实际点击的子元素（即使子元素内部有嵌套标签也能正确匹配），确保只处理.element类的元素。
3. Shiny输入交互：使用Shiny.setInputValue()将子元素的ID传递到Shiny的input对象中，在server端通过observeEvent监听这个值的变化，自动更新reactiveVal。

额外优化点 #

• 如果需要保留shinyjs，也可以将JavaScript代码放在server端的runjs()中执行，效果完全一致。
• 若子元素没有嵌套标签，也可以简化为e.target.classList.contains("element")来判断目标元素。

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