jQuery Mobile 滑块事件

Question

使用以下方法开发移动网络应用程序：

• jquery 1.7.1
• jquery-mobile 1.1.1
• Rails 3.2.1

在这里，我打算随着滑块值的变化而更改时间指示器 (<span id="wake_up_time_display">) 的内容。

当直接调用目标 URL 时，以下工作。

但是在很多情况下，jQuery mobile 显示<div data-role="page"> 时，指示器保持不变。 （滑块本身的值会发生变化。）

<label class="select" for="daily_record_wakeup_time">
    I'll wake up at: 
</label>
<span id="wake_up_time_display"> 6:00</span>
<input data-theme="e" data-track-theme="d" id="daily_record_wakeup_time" 
       max="480" min="240" name="daily_record[wakeup_time]" step="15" 
       type="range" value="360" />

<script>
    $("input[id='daily_record_wakeup_time']").live ("slidercreate", function () {
        $("input[id='daily_record_wakeup_time']").bind ("change", function (event) {
            $("#wake_up_time_display").text(Math.floor($(this).val() / 60) +
                    ":"+($(this).val() % 60 < 10 ? "0":"")+$(this).val() % 60);
        });
    });
</script>

Answer 1

你为什么不直接使用 CSS 选择器呢

$("#daily_record_wakeup_time")

而不是将 ID 作为属性传递？ 此外，如果您可以避免使用“live”方法而使用“delegate”，那就太好了。 jQuery 已经弃用了这种方法，新版本不再支持它。确保在库中的某处有自定义事件“slidercreate”。