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中测试

也要小心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>

​