javascript - R:弹出窗口不会在 Shiny 的响应式(Reactive) UI 中触发

Question

我目前正在开发一个 Shiny 的小工具，遇到了一个小问题，即 renderUI() 生成的 Bootstrap 弹出窗口不会触发。 .谁能阐明为什么会这样？

我对 js 不是很熟悉，所以对于我遗漏的这个问题可能有一个明显的答案。

下面的例子重现了这个问题。简而言之:创建一个呈现侧边栏和情节的小工具；侧边栏内有两个应该触发弹出窗口的链接标签，第一个在 UI 对象中生成，第二个由 uiOutput() 的组合生成和 renderUI() .至少对我而言，响应式(Reactive)弹出窗口不会触发。

MWE:

library(shiny)
library(miniUI)

# Functions for popovers --------------------------------------------------

popoverInit <- function() {
  tags$head(
    tags$script(
      "$(document).ready(function(){$('[data-toggle=\"popover\"]').popover();});"
    )
  )
}
popover <- function(content, pos, ...) {
  tagList(
    singleton(popoverInit()),
    tags$a(href = "#pop", `data-toggle` = "popover", `data-placement` = paste("auto", pos),
           `data-original-title` = "", title = "", `data-trigger` = "hover",
           `data-html` = "true", `data-content` = content, ...)
  )
}

# Gadget function ---------------------------------------------------------

reactive_popovers <- function(data, xvar, yvar) {

  ui <- miniPage(
    gadgetTitleBar("Reactive popovers"),
    fillRow(  # Sidebar and plot.
      flex = c(1, 10),
      tagList(
        tags$hr(),

        ## This popover works fine:
        popover("No problems", pos = "right", "Working popover"),

        tags$hr(),

        ## This one doesn't.
        uiOutput("reactive_popover")
      ),

      ## A pointless plot.
      miniContentPanel(
        plotOutput("plot", height = "100%")
      )
    )
  )

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

    ## Render popover.
    output$reactive_popover <- renderUI({
      popover("Popover content", "right", "Dead popover")
    })

    ## Render plot.
    output$plot <- renderPlot({
      plot(mpg ~ hp, data = mtcars)
    })
  }

  runGadget(ui, server, viewer = browserViewer())
}

reactive_popovers()

Answer 1

我认为这是因为 renderUI 中的 popover 是在 js 绑定(bind)之后创建的，所以它没有被初始化。

根据 this post 的回答，你可以这样做:

popoverInit <- function() {
  tags$head(
    tags$script(
      "$(document).ready(function(){
      $('body').popover({
            selector: '[data-toggle=\"popover\"]',
            trigger: 'hover'        
        });});"
    )
  )
}