1

ネストされたフォームを使用しました。これは、請求書アプリケーションの行ごとの合計と総合計を見つけるための私のjqueryコードです。

$("tr.sum_hours td").on("change", '.hr', function() {
  row = $(this).parent("td").parent();
  total    = 0;
  qnt      = 0;
  rate     = 0;
  discount = 0;
  tax      = 0;
  $(row).find("td input.hr").each(function(index) {
    if ($(this).val() !== "") {
      if ($(this).hasClass('quantity')){
        qnt = parseFloat($(this).val());
      }
      if($(this).hasClass('rate')){
        rate = parseFloat($(this).val());
      }
      if($(this).hasClass('discount')){
        discount = parseFloat($(this).val());
      }
      if($(this).hasClass('tax')){
        tax = parseFloat($(this).val());
      }
      return total = ((qnt*rate)-(discount)+(tax))
    }
  });
  $(row).find("td input.total").val(total);
  grand_total = 0;
  return $(".total").each(function() {
    if ($("#invoice_grand_total") !== "") {
      grand_total = grand_total + parseFloat($(this).val());
    }
    return $("#invoice_grand_total").val(grand_total);
  });
  });

これは私のhtmlコードです。

<table class='item_details'>
  <thead>
  <tr>
    <th>Item name</th>
    <th>Description</th>
    <th>Qty</th>
    <th>Rate</th>
    <th>Discount</th>
    <th>Tax</th>
    <th>Total</th>
    <th>Action</th>
  </tr>
  </thead>
  <tbody class='item_details_input'>

    <tr class='sum_hours'>
<td><input id="invoice_item_details_attributes_0_item_name" name="invoice[item_details_attributes][0][item_name]" size="30" type="text" /></td>
<td><input id="invoice_item_details_attributes_0_description" name="invoice[item_details_attributes][0][description]" size="30" type="text" /></td>
<td><input class="quantity hr" id="invoice_item_details_attributes_0_quantity" name="invoice[item_details_attributes][0][quantity]" size="30" type="text" /></td>
<td><input class="rate hr" id="invoice_item_details_attributes_0_rate" name="invoice[item_details_attributes][0][rate]" size="30" type="text" /></td>
<td><input class="discount hr" id="invoice_item_details_attributes_0_discount" name="invoice[item_details_attributes][0][discount]" size="30" type="text" /></td>
<td><input class="tax hr" id="invoice_item_details_attributes_0_tax" name="invoice[item_details_attributes][0][tax]" size="30" type="text" /></td>

<td><input class="total" disabled="disabled" id="invoice_item_details_attributes_0_total" name="invoice[item_details_attributes][0][total]" size="30" type="text" /></td>
<td><a href="#" class="remove_fields btn btn-mini btn-danger">remove</a></td>
</tr> 
    <tr class='sum_hours'>
<td><input id="invoice_item_details_attributes_1_item_name" name="invoice[item_details_attributes][1][item_name]" size="30" type="text" /></td>
<td><input id="invoice_item_details_attributes_1_description" name="invoice[item_details_attributes][1][description]" size="30" type="text" /></td>
<td><input class="quantity hr" id="invoice_item_details_attributes_1_quantity" name="invoice[item_details_attributes][1][quantity]" size="30" type="text" /></td>
<td><input class="rate hr" id="invoice_item_details_attributes_1_rate" name="invoice[item_details_attributes][1][rate]" size="30" type="text" /></td>
<td><input class="discount hr" id="invoice_item_details_attributes_1_discount" name="invoice[item_details_attributes][1][discount]" size="30" type="text" /></td>
<td><input class="tax hr" id="invoice_item_details_attributes_1_tax" name="invoice[item_details_attributes][1][tax]" size="30" type="text" /></td>

<td><input class="total" disabled="disabled" id="invoice_item_details_attributes_1_total" name="invoice[item_details_attributes][1][total]" size="30" type="text" /></td>
<td><a href="#" class="remove_fields btn btn-mini btn-danger">remove</a></td>
</tr>
  </tbody>
</table>

このコードは静的行で機能しています。ただし、動的に追加された行では機能しません。助けてください。

4

1 に答える 1

1

交換

$("tr.sum_hours td").on("change", '.hr', function() {

これとともに

$("body").on("change", 'tr.sum_hours td .hr', function() {

うまくいくことを願っています。

さらに明確にしたい場合は、jQuery クリック機能が ajax 呼び出し後に機能しませんか?を参照してください。

欲求のjsfiddleデモがうまくいかなかったhttp://jsfiddle.net/suhailvs/wjqjq/

上記の変更後のコードの jsfiddle については、http: //jsfiddle.net/suhailvs/t67pn/1/ にアクセスしてください。

于 2013-07-18T07:40:13.720 に答える