添加新行后如何解决 "onkeyup" 事件

Question

添加新行后，onkeyup() 事件无法正常工作。我认为问题是因为 function checkamount() 它只能根据第一个 rom 执行。

当我更改第一行工作的小时数后，金额应该会更改。

请帮忙。谢谢！！

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jautocalc@1.3.1/dist/jautocalc.js"></script>
<script type="text/javascript">   
   $(document).ready(function() {
  var repeat = '<tr><td><input class="form-control"  name="dayhour[]" type="number" id="dayhour"  onkeyup="checkamount()" required></td> <td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" > <option value="" id="-----" hidden>-----</option><option value="Standby Allowance" id="Standby Allowance">Standby Allowance</option><option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option> <option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option> </select>       </td><td><input class="form-control"  name="rate[]" type="double" id="rate"  readonly ></td><td><input class="form-control"  name="amount[]" type="double" id="amount"  readonly></td></td><td><input class="btn btn-danger" type="button" name="remove" id="remove" value="remove"></td> </tr>';

  $("#add").click(function() {
    $("#table_field").append(repeat);
  });

  $("#table_field").on('click', '#remove', function() {
    $(this).closest('tr').remove();
  });
});

function calc(el) {
  //get num1 field value
  var aa = parseFloat($(el).closest('tr').find('[name*=dayhour').val());
  var amount;
  var rate;
  //compare
if (el.value == "Standby Allowance") {
    rate = 300.00;
    amount = 300.00;
  } else if (el.value == "Normal days - OT") {
    rate = 18.75;
    amount = rate * aa;
  }else if (el.value == "Public Holidays - OT") {
    rate = 37.50;
    amount = rate * aa;
  } 

  //find rate and amout and add value there
  $(el).closest('tr').find('[name*=rate]').val(rate);
  $(el).closest('tr').find('[name*=amount]').val(amount);
}


function checkamount() {
    var textValue1 = document.getElementById('dayhour').value;
    var textValue2 = document.getElementById('rate').value;
    document.getElementById('amount').value =textValue1 * textValue2;
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="insert-form" name="table_field" id="insert_form" method="post" action="applyForm.inc.php" onsubmit="return checkforblank()">
      <hr><h1 class="text-center">Overtime Table </h1><hr>
      <div class="input-field">
        <table class="table table-bordered" id="table_field" >
          <tr>
            <th>Hour</th>
            <th>wagetype</th>
            <th>Rate</th>
            <th>Amount</th>
            <th>Add or Remove</th>
          </tr>
          <tr>
            <td><input class="form-control"  name="dayhour[]" type="number" id="dayhour" onkeyup="checkamount()" required ></td>
            <td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" >
                        <option value="" id="-----" hidden>-----</option>
                        <option value="Standby Allowance" id="Standby Allowance">Standby Allowance</option>
                        <option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option>
                        <option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option>
                      </select>
                    </td>

            <td><input class="form-control"  name="rate[]" type="double" id="rate"  readonly ></td>
            <td><input class="form-control"  name="amount[]" type="double" id="amount"  readonly></td>
            <td><input class="btn btn-warning" type="button" name="add" id="add" value="add"></td>
            </tr>
            </table>
          </div>
        </form>

这是它的工作原理 http://jsfiddle.net/L9eo6zfn/1/

Answer 1

由于您已经在使用 jQuery，您可以使用此库捕获 onkeyup 事件。重要的是将事件附加到文档，这样，它可以处理任何输入，即使是那些以编程方式添加的输入。

我会这样做：

$(document).ready(function() {
  var repeat = '<tr><td><input class="form-control"  name="dayhour[]" type="number" id="dayhour"  required></td> <td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" > <option value="" id="-----" hidden>-----</option><option value="Standby Allowance" id="Standby Allowance">Standby Allowance</option><option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option> <option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option> </select>       </td><td><input class="form-control"  name="rate[]" type="double" id="rate"  readonly ></td><td><input class="form-control"  name="amount[]" type="double" id="amount"  readonly></td></td><td><input class="btn btn-danger" type="button" name="remove" id="remove" value="remove"></td> </tr>';

  $("#add").click(function() {
    $("#table_field").append(repeat);
  });

  $("#table_field").on('click', '#remove', function() {
    $(this).closest('tr').remove();
  });
  
  // Here is how to catch the keyup event
  $(document).on("keyup", "#dayhour", function() {
    console.log("checkamount");
    checkamount();
  });
});

function calc(el) {
  //get num1 field value
  var aa = parseFloat($(el).closest('tr').find('[name*=dayhour').val());
  var amount;
  var rate;
  //compare
if (el.value == "Standby Allowance") {
    rate = 300.00;
    amount = 300.00;
  } else if (el.value == "Normal days - OT") {
    rate = 18.75;
    amount = rate * aa;
  }else if (el.value == "Public Holidays - OT") {
    rate = 37.50;
    amount = rate * aa;
  } 

  //find rate and amout and add value there
  $(el).closest('tr').find('[name*=rate]').val(rate);
  $(el).closest('tr').find('[name*=amount]').val(amount);
}


function checkamount() {
    var textValue1 = document.getElementById('dayhour').value;
    var textValue2 = document.getElementById('rate').value;
    document.getElementById('amount').value =textValue1 * textValue2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="insert-form" name="table_field" id="insert_form" method="post" action="applyForm.inc.php" onsubmit="return checkforblank()">
      <hr><h1 class="text-center">Overtime Table </h1><hr>
      <div class="input-field">
        <table class="table table-bordered" id="table_field" >
          <tr>
            <th>Hour</th>
            <th>wagetype</th>
            <th>Rate</th>
            <th>Amount</th>
            <th>Add or Remove</th>
          </tr>
          <tr>
            <td><input class="form-control"  name="dayhour[]" type="number" id="dayhour" onkeyup="checkamount()" required ></td>
            <td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" >
                        <option value="" id="-----" hidden>-----</option>
                        <option value="Standby Allowance" id="Standby Allowance">Standby Allowance</option>
                        <option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option>
                        <option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option>
                      </select>
                    </td>

            <td><input class="form-control"  name="rate[]" type="double" id="rate"  readonly ></td>
            <td><input class="form-control"  name="amount[]" type="double" id="amount"  readonly></td>
            <td><input class="btn btn-warning" type="button" name="add" id="add" value="add"></td>
            </tr>
            </table>
          </div>
        </form>

添加新行后如何解决 "onkeyup" 事件

How to solve "onkeyup" event after add new row

html

javascript

onkeyup