滑块在 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

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

Answer 2

嗯不确定您的代码中还发生了什么，这是一个示例：

• 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 桌面问题。尝试使用其他浏览器，因为您的代码对我来说看起来不错

Answer 3

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

Answer 4

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