R Shiny - Использование JQuery для элементов, созданных с помощью renderUI

Question

Приложение ниже содержит textInput и две ссылки прямо под ним. Ссылки программно создаются скриптом в links.js и оформляются с использованием CSS в links-styles.css.

Ссылка с классом on является видимой и содержит короткую строку текста «Short», тогда как ссылка с классом off не является и содержит более длинную строку «Очень длинное предложение». Я хотел бы установить ширину видимой ссылки (link1) равной ширине самой широкой ссылки (link2). Это делается в разделе «Рассчитать ширину» link.js.

Это работает, как и ожидалось, когда я вызываю функцию links в пользовательском интерфейсе (если вы откроете инспектор и перейдете к консоли, вы увидите, что возвращаемая ширина равна '149'):

Но когда я вызываю его изнутри renderUI, ссылки больше не отображаются (в консоли возвращаемая ширина равна -Infinity):

Кажется, я не могу выделить причину этого. Я что-то упускаю в links.js или это что-то на конце Шины?

links.R:

library(shiny)

links <- function(onText, offText) {
  tagList(
    singleton(tags$head(
      tags$script(src = 'links.js'),
      tags$link(rel = 'stylesheet', type = 'text/css', href = 'links-style.css')
    )),
    div(class = 'box', div(id = 'placeholder', `data-on` = onText, `data-off` = offText))
  )
}

shinyApp(
  ui = fluidPage(
    textInput('text', 'Text'),
    links('Short', 'A very long sentence') #Works as expected
    # ,uiOutput('dynamic_links') #Doesn't work
  ),
  server = function(input, output, session) {

    output$dynamic_links = renderUI(links('Short', 'A very long sentence'))

  }
)

links. js:

$(document).ready(function() {

  pl = $(document).find('#placeholder');

  a_on = '<a class = "item active on">' + pl.attr('data-on') + '</a>';
  a_off = '<a class = "item off">' + pl.attr('data-off') + '</a>';

  pl.append(a_on, a_off);

  /*Calculate widths*/
  widths = [];

  $('a').each( function() {
              var el = $(this);
              if(!el.hasClass('active')) {
                widths.push(el.addClass('active')[0].clientWidth);
                el.removeClass('active');
              }
            });

    var max = Math.max.apply(Math, widths);
    console.log(max);
    $('a').css('width', max + 'px');        

}); 

links стилей. css:

.box {
    overflow: hidden;
    padding: 0px;
    display: inline-block;
    width: auto;
}

.item {
    line-height: 16px;
    font-size: 100%;
    opacity: 0;
    display: none;
    padding-bottom: 5px;
    position: relative;
    height: 25px;
    box-sizing: border-box;
}

.active {
    opacity: 1;
    display: block;
}

.on {
    padding: 10px;
    background-color: #75b936;
}

.off {
    padding: 10px;
    background: #b2b2b2
}