如何在 shinyApp 中可见元素后应用 JS/jQuery？

Question

首先，在那中提到：

$(document).ready 方法将不起作用，因为在 DOM 准备好之前服务器不会呈现它的输出。使用 session$onFlushed 代替，将 once 参数设置为 TRUE，然后 shiny 将运行该函数仅执行一次，而不是在每次会话刷新时。

没错。现在，我有一个 actionButton (#btn3)，当我点击另一个应用程序 (#btn1) 时，它会出现在应用程序中。但是，当单击另一个按钮后出现此按钮时，jQuery 不起作用。当他出现时，我想在 #btn3 中应用 mouseover 和 mouseout 效果。

我的应用程序：

library(shiny)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  fluidRow(actionButton(inputId = "btn1", label = 'Press'), uiOutput("btn2"))
)

server <- function(input, output, session) {
  
  observeEvent(input$btn1, {
    output$btn2 <- renderUI({
      actionButton(
        inputId = "btn3",
        label = "",
        title = "Ver/ esconder análise",
        icon = icon('eye'),
        style = "color: #f2f2f2; background-color: #008cba;"
      )
    })
  })
  
  session$onFlushed(function() {
    shinyjs::runjs("$('#btn3').on('mouseover',function(){
    $(this).css({'color':'#020202','background-color':'#ffff00'});
    });
    $('#btn3').on('mouseout',function() {
    $(this).css({'color':'#f2f2f2','background-color':'#008cba'});
    });")
  }, once=TRUE)
  
}

shinyApp(ui, server)

如何解决？

Answer 1

library(shiny)

js <- "
$(document).ready(function(){
  $('#btn3').on('mouseover', function(){
    $(this).css({'color': '#020202', 'background-color': '#ffff00'});
  }).on('mouseout', function() {
    $(this).css({'color': '#f2f2f2', 'background-color': '#008cba'});
  });
});
"


ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  br(),
  fluidRow(
    actionButton(
      inputId = "btn1", 
      label = 'Press',
      onclick = "$('#btn3').show()"
    ),
    actionButton(
      inputId = "btn3",
      label = "",
      title = "Ver/ esconder análise",
      icon = icon('eye'),
      style = "display: none; color: #f2f2f2; background-color: #008cba;"
    )
  )
)

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

shinyApp(ui, server)

如何在 shinyApp 中可见元素后应用 JS/jQuery？

How to apply JS/ jQuery after element is visible in a shinyApp?

javascript

jquery

r

shiny

shinydashboard