Question

我想制作简单的实时计算器而不用jquery刷新页面。

我使用jquery添加了动态表行，并在输入字段中应用了一些方法，但在新添加的行中效果不佳。

新添加的行仅在我更改默认行中的内容时才起作用。

这是我的HTML代码：

<button type="button" id="addBillingRow" class="btn btn-success btn-sm fa fa-plus fa-3x float-right">add</button>

<table class="table table-bordered" id="dynamic_field_shipping">
  <thead>
    <tr>        
      <th width="10%">Date</th>
      <th width="20%">Purpose</th>
      <th width="20%">Amount</th>
      <th width="10%">Quantity</th>
      <th width="30%">Total</th>
      <th width="10%">#</th>
    </tr>
  </thead>
  <tbody>
    <tr class="ship_bill">
      <td>
        12/12/17
      </td>
      <td>
        <input id="purpose" type="text" name="purpose" required>
      </td>
      <td>
        <input id="amount" name="amount" type="text" 
               oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required>
      </td>
      <td>
        <input id="quantity" name="quantity" required="required" type="number" min="0" value="0">
      </td>
      <td>
        <strong><i><span class="multTotal">0.00</span></i></strong>
      </td>
      <td>
      </td>
    </tr>
  </tbody>
</table>
<table class="table table-bordered">
  <tbody>
    <tr>
      <td width="50%"><strong><i>Bill Amount:</i></strong></td>
      <td><strong><i><span id="grandTotal">0.00</span></i></strong></td>
    </tr>
  </tbody>
</table>

这是我的jQuery代码：

var i=1;  

$('#addBillingRow').click(function(){  
i++;  
$('#dynamic_field_shipping').append('<tr class="ship_bill" id="row'+i+'"><td></td><td><input id="purpose" type="text" name="purpose" required></td><td><input id="amount" name="amount" type="text" required></td><td><input id="quantity" name="quantity" required="required" type="number" min="0" value="0"></td><td><strong><i><span class="multTotal">0.00</span></i></strong></td><td><a href="" name="remove" id="'+i+'" class="btn_remove">X</a></td></tr>');  
      }); 

$(document).on('click', '.btn_remove', function(e){
  e.preventDefault();
  var button_id = $(this).attr("id");
  $('#row'+button_id+'').remove();  
}); 

function multInputs() {
  var mult = 0;
  // for each row:
  $("tr.ship_bill").each(function () {
  // get the values from this row:
  var $amount = $('#amount', this).val();
  var $quantity = $('#quantity', this).val();
  var $total = ($amount * 1) * ($quantity * 1)
  $('.multTotal',this).text($total);
    mult += $total;
  });
  $("#grandTotal").text(mult);
}

$(".ship_bill input").change(multInputs);

如果您需要，可以在此处查看实时代码：

https://jsfiddle.net/wasid/3xkcLdss/1/

此外我还想在jquery append（）中使用此代码，仅允许输入字段中的数字。但也无法使用它。

oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"

Answer 1

试试这个

 $("tbody").on('change', '.ship_bill input', multInputs);

jQuery函数不适用于新添加的行

1 个答案: