JQuery 引用错误（特定于 Safari）

Question

我的代码似乎适用于 Chrome/IE/Firefox，但当涉及到 Safari 时，我收到一个错误（见下文）。我正在使用 Safari 8.0.8.

我试图将 select 选项的值加起来 selected 并创建一个总数。当然，总数会随着变化而变化。我知道这似乎是在创建 global var 然后尝试使用 safari 访问它时，但我似乎无法让它工作。

该解决方案也必须适用于移动设备，因为它是为移动设备构建的，但也不适用于 iPhone。我正在使用 JQuery 和 JQuery Mobile.

还有其他解决方法吗？我可以简化 JQuery（将有 30 个 select 离子可供选择，我需要这个 smaller 和更多 efficient）？

错误:

ReferenceError: Can't find variable: previous

片段:

$('#select-choice-timely').on('click', function () {
    previous = this.value;
}).change(function () {
    var a = $('#fr-total').html();
    var ab = parseInt(a, 10) - parseInt(previous, 10);
    var b = $(this).val();
    var c = parseInt(ab, 10) + parseInt(b, 10);
    $('#fr-total').html(c);
});

<html class=""><head><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/JamieSterling/pen/QjyxGz">

<link rel="stylesheet prefetch" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<style class="cp-pen-styles"></style></head><body>
<div data-role="page" id="page-site-data">
  <div data-role="panel" data-display="push" id="mypanel" data-theme="b">
    <div class="user">
      <h3>Dave Smith</h3>
      <p><a href="/" class="">Logout</a></p>
    </div>
    <ul id="menu-panel" class="ui-listview ui-listview-b" data-role="listview">
      <li class=""><a href="/home.html" class="ui-link ui-btn ui-btn-icon-left ui-icon-home">Home</a></li>
      <li class=""><a href="#page-2" class="ui-link ui-btn">High performance finance</a></li>
      <li class=""><a href="#page-3" class="ui-link ui-btn">Peer review</a></li>
      <li class=""><a href="#page-4" class="ui-link ui-btn">Tools</a></li>
      <li class=""><a href="#page-5" class="ui-link ui-btn">Diary</a></li>
      <li class=""><a href="#page-6" class="ui-link ui-btn">Blog</a></li>
    </ul>
  </div>
  <!-- /panel -->
  <div data-role="header">
    <h1>Business Unit</h1>
    <a href="/site-1.html" class="ui-btn-left ui-btn-icon-notext ui-icon-hotback" data-role="none" data-icon="hotback" data-iconpos="left" role="button">Back</a>
  </div>
  <!-- /header -->
  <div role="main" class="ui-content">
    <h2>Add Performance Data</h2>
    <form id="add-data-1">
      <fieldset data-role="collapsible" data-iconpos="right" data-collapsed="false" id="fr">
        <legend>Financial Reporting</legend>
        <div class="ui-field-contain" id="timely-report">
          <label for="select-choice-timely" class="select">Timely Report</label>
          <select name="select-choice-timely" id="select-choice-timely" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>

        <div class="ui-field-contain">
          <label for="select-choice-accurate" class="select">Accurate Reporting</label>
          <select name="select-choice-accurate" id="select-choice-accurate" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>

        <div class="ui-field-contain">
          <label for="select-choice-efficient" class="select">Efficient Processes</label>
          <select name="select-choice-efficient" id="select-choice-efficient" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>

        <div class="ui-field-contain">
          <label for="select-choice-harmonised" class="select">Harmonised &amp; Flexible</label>
          <select name="select-choice-harmonised" id="select-choice-harmonised" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>

        <div class="ui-field-contain">
          <label for="select-choice-measured" class="select">Measured &amp; Monitored Performance</label>
          <select name="select-choice-measured" id="select-choice-measured" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>
        <div class="ui-field-contain">
          <label for="select-choice-fr-total">Total</label>
          <div id="fr-total">5</div>
        </div>
      </fieldset>

      <button type="submit" id="submit-1" class="ui-shadow ui-btn ui-corner-all">Submit Data</button>

    </form>
  </div>
  <!-- /content -->
</div>
<!-- /page -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body></html>

Link:

Codepen

Answer 1

在 Safari 中，change 在 click 之前触发，因此 previous 在 change 回调中未定义。

另一种方法：

$("#select-choice-timely").change(function() {

  var a = $("#fr-total").html();
  var ab = parseInt(a, 10) - parseInt($(this).prop('previous'), 10);
  var b = $(this).val();
  var c = parseInt(ab, 10) + parseInt(b, 10);

  $("#fr-total").html(c);
  $(this).prop('previous',this.value)
}).prop('previous',function(){return this.value});

JQuery 引用错误（特定于 Safari）

JQuery Reference Error (Safari Specific)

javascript

safari

jquery

jquery-mobile