Скрипт Jquery не работает в браузере

Question

Я попытался добавить скрипт из Stackoverflow, который занимал много времени, , но похоже, что файл идет против меня, хотя он отлично работает в JSfiddle. http://jsfiddle.net/hqtsmayh/

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>My page</h1> 
    </div> 
    <div role="main" class="ui-content"> 
     <div id="mysliders"> 
      <label for="slider-1">Slider:</label> 
      <input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" /> 
      <label for="slider-2">Slider:</label> 
      <input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" /> 
      <label for="slider-3">Slider:</label> 
      <input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" /> 
      <label for="slider-4">Slider:</label> 
      <input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" /> 
      <label for="slider-5">Slider:</label> 
      <input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" /> 
      <label for="slider-6">Slider:</label> 
      <input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" /> 
     </div> 
     <hr /> 
     <p>Total: <strong id="total"></strong></p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h1>Footer</h1> 
    </div> 
</div> 
<script> 
    $(window).load(function(){ 
      $(document).on("pagecreate", "#page1", function() { 
       $(".add").on("change", function() { 
        addAll(); 
       }); 

       addAll(); 
      }); 

      function addAll() { 
       var sum = 0 
       $('.add').each(function(){   
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);   
       }); 
       $('#total').html(sum); 
      } 
    }); 
</script> 

Все, что я имею в заголовке является вложением Jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

Answer 1

Почему не только это? испытаны в мобильном Safari

Также остерегайтесь по умолчанию OnLoad jsFiddle в

$(window).load(function() { 
 
    $(".add").on("change", function() { 
 
     addAll(); 
 
    }); 
 
    addAll(); 
 
    }); 
 

 
    function addAll() { 
 
    var sum = 0 
 
    $('.add').each(function() { 
 
     sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value); 
 
    }); 
 
    $('#total').html(sum); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-role="page" id="page1"> 
 
    <div data-role="header"> 
 
    <h1>My page</h1> 
 
    </div> 
 
    <div role="main" class="ui-content"> 
 
    <div id="mysliders"> 
 
     <label for="slider-1">Slider:</label> 
 
     <input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" /> 
 
     <label for="slider-2">Slider:</label> 
 
     <input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" /> 
 
     <label for="slider-3">Slider:</label> 
 
     <input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" /> 
 
     <label for="slider-4">Slider:</label> 
 
     <input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" /> 
 
     <label for="slider-5">Slider:</label> 
 
     <input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" /> 
 
     <label for="slider-6">Slider:</label> 
 
     <input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" /> 
 
    </div> 
 
    <hr /> 
 
    <p>Total: <strong id="total"></strong> 
 
    </p> 
 
    </div> 
 
    <div data-role="footer" data-position="fixed"> 
 
    <h1>Footer</h1> 
 
    </div> 
 
</div>