2012-07-28 2 views
-2

와 모바일 웹 응용 프로그램 개발 :jQuery를 모바일 슬라이더 이벤트

  • jQuery를 1.7.1
  • JQuery와 모바일 1.1.1
  • 레일 여기에 3.2.1

, 내가 의도 슬라이더의 값이 변함에 따라 시간 표시기 (<span id="wake_up_time_display">)의 내용을 변경합니다.

다음은 대상 URL을 직접 호출 할 때 작동합니다.

jQuery 모바일이 <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> 

답변

0

은 왜 그냥

$("#daily_record_wakeup_time") 

의 CSS 선택기를 사용하는 대신에 속성으로 ID를 전달하지? 또한 "live"메서드를 사용하지 않고 대신 "delegate"를 사용하면 좋을 것입니다. jQuery는 이미이 메소드를 더 이상 사용하지 않으며 최신 버전에서는 더 이상 지원하지 않습니다. 라이브러리의 사용자 정의 이벤트 "slidercreate"가 있는지 확인하십시오.

+0

감사합니다. Caio! – umio

+0

".on()"및 "pageinit"이벤트와 함께 작동합니다. '$ (문서) CSTE 연구진 ("pageinit"함수 (E) { \t $ ("#의 user_target_wakeup_time"). ("변경"기능 (E)에 { \t $ ("스팬 # 1 wake_up_time_display") .text (Math.floor ($ (this) .val()/60) + ":"+ ($ this) .val() % 60 <10? "0": "") + $ (this). val() % 60); }); });' – umio