动态加载输入时如何应用 jquery-ui 小部件答案

【问题标题】：How to apply a jquery-ui widget when an input is dynamically loaded动态加载输入时如何应用 jquery-ui 小部件
【发布时间】：2020-04-13 15:12:47
【问题描述】：

我想在使用 udash 重复方法加载的输入上使用 JQueryUI 微调器小部件。我尝试了以下方法：

val integers = SeqProperty(Seq[Int](5, 7))

val rootNode =
    div(
        button(onclick:= add, "Add"),
        repeat(integers) { p =>
            val in = input(value := p.get, cls := "my-spinner").render
            $(in).spinner()
            in
        }
    )

def add = { () =>
    integers.append(Random.nextInt(10))
}

def main(args: Array[String]): Unit = {
    dom.document.getElementById("root").appendChild(rootNode.render)
    // $(".my-spinner").spinner()
}

但这不会产生所需的完整 jquery-ui dom。当我检查我的 dom 树时，我得到的是：

<div>
   <button>Add</button>
   <input value="5" class="my-spinner ui-spinner-input" aria-valuenow="5" autocomplete="off" role="spinbutton" />
   <input value="7" class="my-spinner ui-spinner-input" aria-valuenow="7" autocomplete="off" role="spinbutton" />
</div>

如果我注释掉最后一行，在加载 dom 后应用微调器，我会得到完整的 xml：

<div>
   <button>Add</button>
   <span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="height: 21px;">
      <input value="5" class="my-spinner ui-spinner-input" aria-valuenow="5" autocomplete="off" role="spinbutton" />
      <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
         <span class="ui-button-icon ui-icon ui-icon-triangle-1-n" />
         <span class="ui-button-icon-space" />
      </a>
      <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
         <span class="ui-button-icon ui-icon ui-icon-triangle-1-s" />
         <span class="ui-button-icon-space" />
      </a>
   </span>
   <span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="height: 21px;">
      <input value="7" class="my-spinner ui-spinner-input" aria-valuenow="7" autocomplete="off" role="spinbutton" />
      <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
         <span class="ui-button-icon ui-icon ui-icon-triangle-1-n" />
         <span class="ui-button-icon-space" />
      </a>
      <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
         <span class="ui-button-icon ui-icon ui-icon-triangle-1-s" />
         <span class="ui-button-icon-space" />
      </a>
   </span>
</div>

但当然这种方法是不够的，因为我需要能够动态加载我的输入。有没有办法可以动态应用微调器小部件？

【问题讨论】：

标签： udash

【解决方案1】：

我能够通过将我的输入包装在一个 div 元素中并在输入之后附加一个脚本元素来解决这个问题。在这个脚本中，我使用了回调机制来允许在每次加载新输入时运行代码。回调机制并不完全直截了当，因为我只能在定义脚本标记时调用 javascript 代码。所以我添加了一个非原生的 JS 类型来处理这个问题。我使用一个组件概括了整个方法。我在ScalaFiddle 上概述了这个解决方案

【讨论】：