在页面加载时更新价格字段

Question

我正在尝试在加载页面上激活一个函数，该函数是获取“input#quantity”中的数值并在页面加载激活函数currentPrice上计算“input.final-price”。但在页面加载时，页面加载时不会更新字段。

function currentPrice() {
  var priceProduct = parseFloat($.trim($('span.price').html().replace(",", "").replace("$", "")));	
  var convertion = ((priceProduct)/100).toFixed(2);
  var price = parseFloat($("input#quantity").val());
  var total = ((convertion) * (price)).toFixed(2);
  $("input.final-price").val(total);
  }
// Onload
$(document).on("load", "input", currentPrice);

Answer 1

您应该等到文档加载然后运行您的函数

$(function(){
    currentPrice();
});

上面是$(document).ready()的简写

Answer 2

我对您的标记做了一些假设（请参阅下面的演示）；请注意，

.final-price

引用现在是一个 ID (

#final-price

) 而不是一个类（因为这使得绑定关联的

<label>

更容易）。

我还假设您希望最终价格（只读）在输入新数量时保持更新。

function currentPrice() {
  var priceProduct = parseFloat($.trim($('span.price').html().replace(",", "").replace("$", "")));
  var convertion = ((priceProduct) / 100).toFixed(2);
  var price = parseFloat($("#quantity").val());
  var total = ((convertion) * (price)).toFixed(2);
  $("#final-price").val(total);
}

$(function() {
  // initialise final figure
  currentPrice();
  
  // ensure total is updated each time quantity is changed
  $("#quantity").on("keyup", currentPrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">$38,000</span>

<label for="quantity">Quantity</label>
<input id="quantity" value="5" />

<label for="final-price">Final</label>
<input id="final-price" readonly />