title: Jquery script isn't working in browser
body: <p>I have tried to add a script from Stackoverflow that took ages to come by,
  but it seems like the file is going against me, though it's working perfectly
  fine in JSfiddle. <a href="http://jsfiddle.net/hqtsmayh/" rel="nofollow">http://jsfiddle.net/hqtsmayh/</a></p>
  
  <pre><code>&lt;div data-role="page" id="page1"&gt;
      &lt;div data-role="header"&gt;
           &lt;h1&gt;My page&lt;/h1&gt; 
      &lt;/div&gt;
      &lt;div role="main" class="ui-content"&gt;
          &lt;div id="mysliders"&gt;
              &lt;label for="slider-1"&gt;Slider:&lt;/label&gt;
              &lt;input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" /&gt;
              &lt;label for="slider-2"&gt;Slider:&lt;/label&gt;
              &lt;input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" /&gt;
              &lt;label for="slider-3"&gt;Slider:&lt;/label&gt;
              &lt;input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" /&gt;
              &lt;label for="slider-4"&gt;Slider:&lt;/label&gt;
              &lt;input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" /&gt;
              &lt;label for="slider-5"&gt;Slider:&lt;/label&gt;
              &lt;input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" /&gt;
              &lt;label for="slider-6"&gt;Slider:&lt;/label&gt;
              &lt;input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" /&gt;
          &lt;/div&gt;
          &lt;hr /&gt;
          &lt;p&gt;Total: &lt;strong id="total"&gt;&lt;/strong&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" data-position="fixed"&gt;
           &lt;h1&gt;Footer&lt;/h1&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(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);
              }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>All I have in the header is a Jquery attachment:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>