Flexdashboard中observeEvent内runjs执行失效问题排查

你的问题出在代码执行顺序上：当你调用onclick("submit", ...)的时候，页面上还没有生成id为submit的按钮元素，所以shinyjs无法完成事件绑定，导致点击按钮没有反应。

在flexdashboard的R Markdown文档中，代码块是按照从上到下的顺序依次执行的。你把onclick放在了「Chart A」的代码块里，而actionButton在后面的「Chart B」代码块——这时候执行onclick时，按钮还没被渲染到页面，自然找不到目标元素，绑定操作就失效了。

修正方案1：调整代码顺序，在按钮创建后绑定事件 #

把onclick的调用移到actionButton所在的代码块中（或者之后的代码块），确保按钮已经存在后再绑定事件：

---
title: "reprex shinyjs rmd"
output: flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shinyjs)
useShinyjs(rmd = TRUE)

Column {data-width=650} #

Chart A #

# 这里可以放你的计算逻辑代码

Chart B #

actionButton(inputId="submit", label = "Submit answers", class="btn btn-success")
# 按钮创建完成后再绑定点击事件
onclick("submit", runjs('alert("Hello! I am an alert box!!");'))

## 修正方案2：使用Shiny的`observeEvent`监听按钮（更推荐）

这种方式更贴合Shiny的响应式编程逻辑，不需要依赖DOM元素的创建顺序，而且方便你在跳转前先执行计算逻辑：

```r
---
title: "reprex shinyjs rmd"
output: flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shinyjs)
useShinyjs(rmd = TRUE)

Column {data-width=650} #

Chart A #

# 监听按钮点击事件，先执行计算再执行JS
observeEvent(input$submit, {
  # 在这里添加你的计算逻辑
  # 比如：
  # result <- some_calculation()
  
  # 计算完成后执行JS操作
  runjs('alert("Hello! I am an alert box!!");')
})

Chart B #

actionButton(inputId="submit", label = "Submit answers", class="btn btn-success")

两种方案都能解决你的问题，方案2更适合需要先完成计算再执行跳转/弹窗的场景，也是Shiny开发中更常规的写法。

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