jQuery Mobile - проблема с вычислениями и onClick

Я новичок в jQuery mobile, и я пытаюсь сделать простую функцию, которая помогает людям вычислять энергию, используя один слайдер для области, группы радиообъектов для glastype сегодня и материал под названием moniflex, который будет использоваться вместо glas и приведет к экономии энергии.

У меня есть следующие вопросы: - Событие 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"></div>
    <div data-role="content" id="Content">
    <div data-role="fieldcontain">
    <div id="Resultat" class="Sum">0 kWh</div>
    <div id="Yta">
    
    <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">
          
Option <input type="radio" name="Ftyp" id="Ftyp_0" value="5.5" /> <input type="radio" name="Ftyp" id="Ftyp_1" value="3" />
</div> </div> <div id="Material"> <div data-role="fieldcontain">
MONIFLEX <input type="radio" name="Mflex" id="Mflex_0" value="3" /> <input type="radio" name="Mflex" id="Mflex_1" value="1.9" /> <input type="radio" name="Mflex" id="Mflex_2" value="1.4" />
</div> </div> </div> </div> </div> </div> </body> </html>
1
nl ja de
Какую ценность вы получили в Safari/iOS?
добавлено автор Gajotres, источник

2 ответы

Я нашел вашу проблему. Недостаточно нажать на группу управления, потому что вы попытаетесь найти значение радио, прежде чем будет выбрано радиооборудование. Вам нужно будет создать небольшой тайм-аут.

Here's a working example: http://jsfiddle.net/Gajotres/yRbUT/

$(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);    
}

Также, если возможно, не используйте onclick с jQuery Mobile. Вместо этого свяжите события самостоятельно, как в моем примере.

1
добавлено
Я бы использовал vclick, а не щелкнул jQuery Mobile. щелчок слишком медленный и может не срабатывать в некоторых случаях на мобильных устройствах.
добавлено автор asgeo1, источник
Привет, спасибо большое за ответ! Это работает намного лучше, но я до сих пор не получаю информацию для обновления на Safari mobile, см. Ссылку isolight. SE/мобильный/index.html
добавлено автор user2050065, источник
Я обновил скрипт с помощью touchstart и щелкнул, но теперь мне нужно дважды щелкнуть по радиусу, чтобы получить обновленное значение. '$ (document) .on (' pagebeforeshow ',' # test-page ', function() {$ (document) .on (' touchstart click ',' [data-role = "controlgroup"] ', function() {setTimeout (function() {displayVals ();}, 100);}); $ ("# slider1") .on ('slidestop', function (event, ui) {displayVals ();});}); '
добавлено автор user2050065, источник

Я нашел вашу проблему. Недостаточно нажать на группу управления, потому что вы попытаетесь найти значение радио, прежде чем будет выбрано радиооборудование. Вам нужно будет создать небольшой тайм-аут.

Here's a working example: http://jsfiddle.net/Gajotres/yRbUT/

$(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);    
}

Также, если возможно, не используйте onclick с jQuery Mobile. Вместо этого свяжите события самостоятельно, как в моем примере.

1
добавлено
Я бы использовал vclick, а не щелкнул jQuery Mobile. щелчок слишком медленный и может не срабатывать в некоторых случаях на мобильных устройствах.
добавлено автор asgeo1, источник
Привет, спасибо большое за ответ! Это работает намного лучше, но я до сих пор не получаю информацию для обновления на Safari mobile, см. Ссылку isolight. SE/мобильный/index.html
добавлено автор user2050065, источник
Я обновил скрипт с помощью touchstart и щелкнул, но теперь мне нужно дважды щелкнуть по радиусу, чтобы получить обновленное значение. '$ (document) .on (' pagebeforeshow ',' # test-page ', function() {$ (document) .on (' touchstart click ',' [data-role = "controlgroup"] ', function() {setTimeout (function() {displayVals ();}, 100);}); $ ("# slider1") .on ('slidestop', function (event, ui) {displayVals ();});}); '
добавлено автор user2050065, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda