javascript - Jquery keyup 只能在 Chrome 中工作？

Question

我有一个基本的成本计算器，我想在文本字段中输入数字时自动添加值。这在 Chrome 中完美运行，但由于某种原因仅在 Chrome 中。我的目标是每当在文本字段中输入数字时，新的数学结果就会显示在美元符号后面。我没有收到控制台错误，并且 JS Hint/Lint 看起来都不错。

知道为什么这在 Chrome 中有效，但在其他地方无效吗？

这是一个 fiddle :http://jsfiddle.net/Egreg87/j7r4zte8/4/

window.onload = function() {


$('input').keyup(function(){ // run anytime the value changes

    var duration =  parseFloat($('#duration').val()) || 0; // get value of field
    var timeHr =  parseFloat($('#timeHr').val()) || 0; // get value of field
    var distance = parseFloat($('#distance').val()) || 0; // get value of field
    var flight = parseFloat($('#flight').val()) || 0; // convert it to a float
    var parkDays = parseFloat($('#parkDays').val()) || 0;
    var parking = '12.00';
    var fuelCost= '3.50';

    $('#added').html(flight + parkDays * parking + distance * (2) / (20) * fuelCost + timeHr); // add them and output it

    });

$('input').keyup(function(){ // run anytime the value changes

    var distance1 = parseFloat($('#distance1').val()) || 0; // get value of field
    var flight1 = parseFloat($('#flight1').val()) || 0; // convert it to a float
    var parkDays = parseFloat($('#parkDays').val()) || 0;
    var parking1 = '12.00';
    var fuelCost1= '3.50';

    $('#added1').html(flight1 + parkDays * parking1 + distance1 * (2) / (20) * fuelCost1); // add them and output it

    });

$('input').keyup(function(){ // run anytime the value changes

    var duration2 =  parseFloat($('#duration2').val()) || 0; // get value of field
    var timeHr =  parseFloat($('#timeHr').val()) || 0; // get value of field
    var distance2 = parseFloat($('#distance2').val()) || 0; // get value of field
    var flight2 = parseFloat($('#flight2').val()) || 0; // convert it to a float
    var parkDays = parseFloat($('#parkDays').val()) || 0;
    var parking2 = '12.00';
    var fuelCost2= '3.50';

    $('#added2').html(flight2 + parkDays * parking2 + distance2 * (2) / (20) * fuelCost2); // add them and output it

});




<!--Caclulator fields-->

<div id="calc-fields">  
<div>
<label class="main3">MGM</label><br>
<label>Total Cost of Your Flight(s) from MGM $:</label>
<input name="numeric" class="allownumericwithdecimal" id="flight"></input><br />

<label for="distance">Distance (miles): </label>
<input type="text" class="number" name="distance" id="distance"></input>
<label for="duration">Drive Time (minutes): </label>
<input type="text" name="duration" id="duration"  class="drive-time"></input>


<label class="main">Total Cost from MGM: <br>$</label>
<span id="added" class="main2"></span><br />



</div>

<div>
<label class="main3">ATL</label><br>
<label>Total Cost of Your Flight(s) from ATL $:</label>
<input name="numeric" class="allownumericwithdecimal" id="flight1"></input><br />
<label for="distance1">Distance (miles): </label>
<input type="text" name="distance1" id="distance1"></input>
<label  for="duration1">Drive Time (minutes): </label>
<input type="text" name="duration1" id="duration1"  class="drive-time"></input>




<label class="main">Total Cost from ATL:<br> $</label>
<span id="added1" class="main2"></span><br />

</div>

<div>
<label class="main3">BHM</label><br>
<label>Total Cost of Your Flight(s) from BHM $:</label>
<input name="numeric" class="allownumericwithdecimal" id="flight2"></input><br />
<label for="distance2">Distance (miles): </label>
<input type="text" name="distance2" id="distance2"></input>
<label for="duration">Drive Time (minutes):</label>
<input type="text" name="duration2" id="duration2"  class="drive-time"></input>


<label class="main">Total Cost from BHM: <br>$</label>
<span id="added2" class="main2"></span><br />


</div>

<br>
<hr></hr>



        <!--End calc fields-->

Answer 1

有几件事 - 更改为文档就绪。您定义了一个函数 calc1，因为您将其作为回调传递，更改为匿名函数。相反，将 .keyup 更改为 on('keyup')如果您花时间查看控制台错误，这样的事情对您来说永远不会成为问题。下面是固定的jsfiddle http://jsfiddle.net/j7r4zte8/7/

$('input').on('keyup', function(){ //vs  $('input').keyup(function calc1()