javascript - jQuery keyup仅在Chrome中有效吗？

我有一个基本的费用计算器，我希望在文本字段中输入数字时自动添加值。这在Chrome中非常有效，但出于某些原因仅在Chrome中有效。我的目标是每当在文本字段中输入数字时，都会在美元符号后显示新的数学结果。我没有收到任何控制台错误，并且JS Hint / Lint都看起来不错。

有什么想法为什么可以在chrome中工作，但在其他地方没有？

这是一个小提琴：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-->

最佳答案

几件事-更改为准备好文档。您正在定义函数calc1，同时将其作为回调传递给它，更改为匿名函数。取而代之的是.keyup改为on（'keyup'）
如果您花时间查看控制台错误，那么对您而言，这样的事情就永远不会成为问题。
下面是固定的jsfiddle
http://jsfiddle.net/j7r4zte8/7/

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