jQuery UI 数字微调器事件问题答案

【问题标题】：jQuery UI number spinner event questionjQuery UI 数字微调器事件问题
【发布时间】：2009-05-29 16:04:18
【问题描述】：

我已经被这个问题难住了一个多星期 :( 任何对此问题的见解将不胜感激！

如何链接 jQuery UI 数字微调器/步进器 (http://wiki.jqueryui.com/Spinner)，以便标签文本值随着微调器值的增加或减少而变化？

    ...
        <script type="text/javascript">


                $(document).ready(function() {

                    $("#s1").spinner({max: 100, min: -100});

                    $("#s1").bind("spin", function() {
                      $("label1").innerText = $("#s1").spinner("value");
                    });
                });
        </script>
    ...

<body>
...
    <p><label for="s1">Basic:</label> <input id="s1" name="value"/></p>
    <p><label for="label1"></label></p>
...
</body>

谢谢！

编辑：除了输出问题外，处理程序本身似乎也存在问题。当我旋转/更改微调器时，处理程序不执行。

【问题讨论】：

这不应该是 id="label1" 吗？ $("#label1").html($("#s1").spinner("value"));
谢谢克里斯。我已经修改了上面的问题，因为处理程序似乎一开始没有执行。

标签： javascript jquery html events jquery-ui

【解决方案1】：

根据 UI/Spinner 文档，微调器更改事件的名称不是“spin”，而是“spinchange”。如果您相应地更改 .bind 方法的参数，则一切正常。

【讨论】：

【解决方案2】：

试试这个 - 从上面的示例中，我将您的标签更改为跨度，以便文本可以去某个地方，在自旋处理程序中使用 this.value，并使用 jQuery 的 .html() 转储值。

<script type="text/javascript">
        $(document).ready(function() {

            $("#s1").spinner({max: 100, min: -100});

            $("#s1").bind("spin", function() {
              $("#label1").html(this.value);
            });
        });
</script>

<body>
  <p><label for="s1">Basic:</label> <input id="s1" name="value"/></p>
   <p><span id="label1"></span></p>
</body>

【讨论】：

感谢您的帖子。我试过这个但是我仍然无法让它工作。我认为事件处理程序本身也存在问题，因为当我更改微调器时它似乎没有执行。谢谢。