Question

Developing a mobile web app with:

• jquery 1.7.1
• jquery-mobile 1.1.1
• Rails 3.2.1

Here, I intended to change content of time indicator (<span id="wake_up_time_display">) as the value of slider changes.

Following works when the target URL is directly called.

But in many occasions when jQuery mobile displays <div data-role="page">, the indicator remains unchanged. (Value of the slider itself changes.)

<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

Why don’t you just use the CSS selector for it

$("#daily_record_wakeup_time")

instead of passing in the ID as an attribute?
Also, if you could avoid the use of the method “live” and instead use “delegate” would be great. jQuery has already deprecated this method, it’s no longer supported by newer versions. Make sure that you have the custom event “slidercreate” somewhere in your libraries.