R Shiny：为什么 html 输出会阻止 JavaScript 工作？答案

【问题标题】：RShiny: Why does htmlOutput prevents JavaScript from working?R Shiny：为什么 html 输出会阻止 JavaScript 工作？
【发布时间】：2021-11-04 05:02:36
【问题描述】：

我正在构建一个 RShiny 应用程序，我需要在其中创建 vanilla/plain html 按钮并使用 JavaScript 为它们提供基本功能。在我的原始应用程序中，我有一个包含这些按钮的 htmlOutput（或 uiOutput）元素（它们是根据用户输入动态生成的）。不幸的是，JavaScript 在这个 htmlOutput 元素中不能正常工作，我不知道为什么。请参阅我的最小可重现示例（app.R）：

library(shiny)
library(shinyjs)

# define ui
ui <- fluidPage(
    useShinyjs(),
    tags$head(
        tags$script(
            HTML(
            "window.onload = function(){
            var coll = document.getElementsByClassName('testclass');
            var i;
            console.log(coll);
              for (i = 0; i < coll.length; i++) {
                  coll[i].addEventListener('click', function() {
                    alert('clicked');
                  });
              };
            };
            ")
            )
    ),
    mainPanel(
        # normal button (working)
        tags$button(
            type="button",
            class="testclass",
            "Click to alert (button inside main panel)"
        ),
        # html output button (not working)
        htmlOutput("html_out")
    )
)

# define server
server <- function(input, output) {

    # generate html output button (problematic with JS)
    output$html_out <- renderUI({
        tags$button(
            type="button",
            class="testclass",
            "Click to alert (button inside htmlOutput)"
        )
    })
}

# run app
shinyApp(ui = ui, server = server)

如果将 tags$button() 元素静态添加到主面板中，则它可以正常工作。但是，如果通过 htmlOutput 添加相同的 tags$button() 元素，则它无法与 JavaScript 代码一起使用。对此有什么解释或解决方法吗？

html 输出代码的唯一区别是 htmlOutput 元素被包裹在一个 div 中，其中 class= "shiny-html-output shiny-bound-output"。而且我知道我通常应该使用 actionButton() 但在我的情况下这是不可能的。

感谢您的帮助！

【问题讨论】：

也许使用 view-source 发布渲染输出？

标签： javascript html r shiny shinyjs

【解决方案1】：

问题是head 中的初始 JS 在应用程序启动时运行，但第二个按钮无法立即使用。可以直接将JS代码添加到HTML代码中

library(shiny)
library(shinyjs)

# define ui
ui <- fluidPage(
    useShinyjs(),
    tags$head(
        tags$script(
            HTML(
                "window.onload = function(){
            var coll = document.getElementsByClassName('testclass');
            var i;
            console.log(coll);
              for (i = 0; i < coll.length; i++) {
                  coll[i].addEventListener('click', function() {
                    alert('clicked');
                  });
              };
            };
            ")
        )
    ),
    mainPanel(
        # normal button (working)
        tags$button(
            type="button",
            class="testclass",
            "Click to alert (button inside main panel)"
        ),
        # html output button (not working)
        htmlOutput("html_out")
    )
)

# define server
server <- function(input, output) {
    
    # generate html output button (problematic with JS)
    output$html_out <- renderUI({
        tags$button(
            type="button",
            class="testclass",
            
            # ADD JS HERE
            onclick = "alert('clicked');",
            "Click to alert (button inside htmlOutput)"
        )
    })
}

# run app
shinyApp(ui = ui, server = server)

【讨论】：