Question

我正在使用jquery keyup来计算费用，keyup工作正常但问题是页面加载费用没有显示这意味着它仅在按下某个键但我想计算页面加载费用时有效。这里是我的代码

HTML：

<tr>
    <td><label for="amount">Amount</label></td>
    <td><div class="input-container"><input name="amount" id="amount"  value="100"  type="text" /></td>
  </tr>



<tr>
    <td><label for="fee">Fee<font color="#CC0000">(5%)</font></label></td>
    <td>$ <span id="fees"> </span>
    </td>


  </tr>

<tr>
    <td><label for="net">Net amount</label></td>
    <td>$<span id="net"></span>
    </td>


  </tr>

Jquery的：

$(document).ready(function(){
    $('#amount').on('keyup change', function(){

        $('#fees').text($('#amount').val()*(5/100));

        $('#net').text($('#amount').val() - ($('#amount').val()*5/100));


         });    
});

Answer 1

你可以做这样的事情

 $(document).ready(function(){

        //calcualte fee on page load
        calculateFee();

        $('#amount').on('keyup change', function(){

            calculateFee();
        }); 

        function calculateFee(){

           $('#fees').text($('#amount').val()*(5/100));
           $('#net').text($('#amount').val() - ($('#amount').val()*5/100));
        }

    });

Answer 2

明确触发“keyup”事件。

$('#amount').trigger("keyup");

由于

Answer 3

这样的事情：

$(document).ready(function(){
    function calculate() {
        $('#fees').text($('#amount').val()*(5/100));
        $('#net').text($('#amount').val() - ($('#amount').val()*5/100));
    }

    $('#amount').on('keyup change', function(){
        calculate();
    });    

   calculate();
});

Answer 4

将此代码移动到自己的函数中：

function calculate()
{
    $('#fees').text($('#amount').val()*(5/100));
    $('#net').text($('#amount').val() - ($('#amount').val()*5/100));
}

然后这样做：

$(document).ready(function()
{

 calculate();
 $('#amount').on('keyup change', function()
 {

      calculate();

     });    
});

因此，您首先在文档就绪上调用计算然后绑定到keyup事件;

Answer 5

尝试使用此Javascript，您可以定义函数，您将在页面加载时调用该函数，然后在每个键盘更改上调用＆＃39;事件

function calculateFees() {
    $('#fees').text($('#amount').val()*(5/100));
    $('#net').text($('#amount').val() - ($('#amount').val()*5/100));
}

$(document).ready(function(){
    calculateFees();
    $('#amount').on('keyup change', calculateFees);  
});

页面加载时的Jquery键盘

5 个答案: