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

Question

我正在构建一个 RShiny 应用程序，我需要在其中创建 vanilla/plain html 按钮 并使用 [ 为它们提供基本功能=31=]。在我原来的应用程序中，我有一个包含这些按钮的 htmlOutput（或 uiOutput）元素（它们是根据用户输入动态生成的）。不幸的是 JavaScript 在这个 html 输出元素中没有正常工作，我不知道为什么。请参阅我的最小可重现示例 (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 输出代码的唯一区别是 html 输出元素被包裹在 div 中，其中 class = "shiny-html-输出闪亮绑定输出”。而且我知道我通常应该使用 actionButton() 但在我的情况下这是不可能的。

感谢您的帮助！

Answer 1

问题是当应用程序启动时 head 中的初始 JS 是运行但第二个按钮不能立即使用。可以直接在HTML代码

中添加JS代码

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)

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

RShiny: Why does htmlOutput prevents JavaScript from working?

html

javascript

r

shiny

shinyjs