jQuery Mobile - 계산 및 onClick의 문제

Question

저는 jQuery 모바일의 초보자입니다. 지역에 하나의 슬라이더를 사용하고 글래스 타입을위한 라디오 버튼 그룹을 사용하여 사람들이 에너지 계산을 할 수있게 해주는 간단한 함수를 만들려고합니다. glif 대신 moniflex라는 재료가 사용되어 에너지를 절약하게됩니다.

문제점은 다음과 같습니다. - onclick 이벤트가 safari mac/iPhone에서 작동하지 않습니다. - 값이 같지만 선택 항목이 동일합니다.

코드 :

<script type="text/javascript"> 


    function displayVals() { 

     var area = $("#slider1").val(); 
     var glas = $("input[name='Ftyp']:checked").val(); 
     var moniflex = $("input[name='Mflex']:checked").val(); 
     var summary = parseFloat(area * (glas - moniflex) * 107.28); 
     $("#Resultat").html(parseInt(summary) + " kWh"); 

    } 

    </script> 

    <div data-role="page" class="gridContainer clearfix"> 
    <div id="LayoutDiv1"> 
    <div data-role="header" id="Header"><img src="img/top.jpg"></div> 
    <div data-role="content" id="Content"> 
    <div data-role="fieldcontain"> 
    <div id="Resultat" class="Sum">0 kWh</div> 
    <div id="Yta"> 
    <label for="slider">Value:</label> 
    <input type="range" name="slider1" id="slider1" value="0" min="0" max="1000" step="1" onChange="displayVals();" data-highlight="true" /> 

     </div> 
     <div id="Glas"> 
     <div data-role="fieldcontain"> 
      <fieldset data-role="controlgroup" data-type="horizontal" onClick="displayVals();" > 
      <legend>Option</legend> 
      <input type="radio" name="Ftyp" id="Ftyp_0" value="5.5" /> 
      <label for="Ftyp_0">Enkelglas</label> 
      <input type="radio" name="Ftyp" id="Ftyp_1" value="3" /> 
      <label for="Ftyp_1">Dubbelglas</label> 
      </fieldset> 
     </div> 

     </div> 
     <div id="Material"> 
     <div data-role="fieldcontain"> 
      <fieldset data-role="controlgroup" data-type="horizontal" onClick="displayVals();" > 
      <legend>MONIFLEX</legend> 
      <input type="radio" name="Mflex" id="Mflex_0" value="3" /> 
      <label for="Mflex_0">10mm</label> 
      <input type="radio" name="Mflex" id="Mflex_1" value="1.9" /> 
      <label for="Mflex_1">20mm</label> 
      <input type="radio" name="Mflex" id="Mflex_2" value="1.4" /> 
      <label for="Mflex_2">30mm</label> 
      </fieldset> 
      </div> 

    </div> 
     </div> 




    </div> 
    </div> 
</div> 
</body> 
</html> 

Answer 1

나는 문제를 발견했다. 라디오 버튼을 실제로 선택하기 전에 라디오 값을 찾으려고하기 때문에 컨트롤 그룹을 클릭하는 것만으로는 충분하지 않습니다. 약간의 타임 아웃을 만들어야합니다.

여기에 동작하는 예제입니다 : http://jsfiddle.net/Gajotres/yRbUT/ jQuery를 모바일로 onclick을 사용하지 않는 가능하면 또한

$(document).on('pagebeforeshow', '#test-page', function(){  
    $(document).on('click', '[data-role="controlgroup"]', function(){  
     setTimeout(function() { displayVals(); }, 100); 
    }); 
    $("#slider1").on('slidestop', function(event, ui) { 
     displayVals(); 
    });  
}); 

function displayVals() { 
    var area = $("#slider1").val(); 
    var glas = $("input[name='Ftyp']:checked").val(); 
    var moniflex = $("input[name='Mflex']:checked").val(); 
    var summary = parseFloat(area * (glas - moniflex) * 107.28); 
    $("#Resultat").html(parseInt(summary) + " kWh"); 
    alert(area + ' - ' + glas + ' - ' + moniflex);  
} 

. 대신 내보기와 같이 직접 이벤트를 바인딩하십시오.