Ошибка ссылки JQuery (зависит от сафари)

Мой код, похоже, работает на Chrome/IE/Firefox, но когда дело доходит до Safari, я получаю сообщение об ошибке (см. Ниже). Я использую Safari 8.0.8.Ошибка ссылки JQuery (зависит от сафари)

Я пытаюсь добавить значения выбранных опций после их выбора и создать общее количество. Общее изменение изменится при изменении курса. Я знаю, что это похоже на создание global var, а затем попытку доступа к нему с помощью safari, но я не могу заставить его работать.

Решение должно работать на мобильных устройствах также, поскольку оно строится для мобильных устройств, но не работает на iPhone. Я использую JQuery и JQuery Mobile.

Есть ли другой способ обойти это? Могу ли я упростить JQuery (там будет 30 вариантов на выбор, мне понадобится это 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>

Ссылка:

Codepen

источник

2015-09-16 Jamie Harding

Как кажется, в Safari на change пожары перед click, поэтому previous не определено в change -callback.

Другой подход:

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

источник

2015-09-16 10:40:04

Спасибо! Мне потребовалось некоторое время, чтобы решить эту проблему. –

Ошибка ссылки JQuery (зависит от сафари)

ответ

Смежные вопросы