滑块在 jQuery Mobile 中不起作用

Question

我正在尝试 jQuery Mobile 中的滑块小部件，只是从文档中复制了代码：

    <div data-role="fieldcontain">
        <label for="slider">Input slider:</label>
        <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
    </div>

但这根本没有按预期工作。当我在 Safari 中拖动滑块时，数字几乎随机变化。它们从 0 增加到 9，然后在滑块的最右侧返回到 0，然后当我向后滑动时，它在 0 和 9 之间来回移动......

我是不是做错了什么？

我在 CodeIgniter 应用程序中使用它。

编辑：

我刚刚发现它在 iPhone 上运行时确实有效，但在桌面上的 Safari 中却不行。它仍然很奇怪，因为首先我需要它在桌面上工作以进行开发，其次，它可以在 jQuery Mobile 演示站点上工作......我试过查看那个代码，甚至完全复制它，但它仍然是在我的页面上不起作用。

我已经更新到 RC2，而演示页面上的脚本仍然是 beta 2，可以吗？

编辑 2：

不，不是这样...我检查了旧文档，但最新版本的新文档中的示例在他们的演示页面上也可以正常工作。所以这是另一回事。

Answer 1

我注意到了同样的问题，但我相信这是由于使用了实验性的滚动视图...如果我注释掉我的滚动视图脚本，翻转开关滑块会再次起作用。

Answer 2

请记住，jqueryMobile 1.0.1 版与 jquery 1.7.1 不完全兼容，这使得滑块无法在某些浏览器上运行。 尝试将 jquery 降级到 1.6.4 版，滑块应该开始工作

Answer 3

我自己找到了答案。当我在 Safari 中查看网络检查器时，jQuery Mobile 样式表将输入字段的宽度设置为 50px。如果我将其增加到 70px，我注意到这些值实际上在增加，只是我之前只看到了左边的数字。奇怪的是，即使使用了相同的样式表，它在他们的演示站点上似乎也运行良好！无论如何，我通过覆盖该规则并将其设置为 70px 使其工作。

Answer 4

嗯不知道你的代码还有什么，这里是一个例子：

• http://jsfiddle.net/sYQAu/1/

滑块文档：

• http://jquerymobile.com/demos/1.0rc2/docs/forms/slider/index.html

HTML

<div data-role="page" id="slider-test">
    <div data-role="content">

        <label for="slider-0">Input slider:</label>
        <input type="range" name="slider-1" id="slider-0" value="2" min="0" max="10"  />
        <br />
        <div data-role="fieldcontain">
            <label for="slider">Input slider:</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
        </div>

    </div>
</div>

顺便说一句，如果这很重要，我在 Ubuntu 10.04 上使用 Chrome，这可能是 Safari 桌面问题。尝试使用其他浏览器，因为您的代码对我来说看起来不错