Javascript 如何解决；“onkeyup”；添加新行后的事件

添加新行后，

onkeyup（）

事件无法工作。 我认为问题在于

函数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>

$（文档）.ready（函数（）{
var repeat='----备用允许正常天数-加班公共假日-加班'；
$（“#添加”）。单击（函数（）{
$（“#表_字段”）。追加（重复）；
});
$（“#表#字段”）。在（'单击'，'删除'，函数（）上{
$（this）.closest（'tr'）.remove（）；
});
});
函数计算（el）{
//获取num1字段值
var aa=parseFloat（$（el）.closest（'tr'）.find（'[name*=dayhour'）.val（））；
风险价值金额；
var率；
//比较
如果（el.value==“备用余量”）{
费率=300.00；
金额=300.00；
}否则如果（el.value==“正常天数-加班”）{
比率=18.75；
金额=费率*aa；
}else if（el.value==“公共假日-OT”）{
比率=37.50；
金额=费率*aa；
} 
//找到比率和数量，并在那里增值
$（el）.最近（'tr'）.find（'[name*=rate]'）.val（rate）；
$（el）.最近（'tr'）.find（'[name*=amount]'）.val（amount）；
}
函数checkamount（）{
var textValue1=document.getElementById（'dayhour'）.value；
var textValue2=document.getElementById（'rate'）。值；
document.getElementById（'amount'）。value=textValue1*textValue2；
}

加班表

时辰
赌型
比率
数量
添加或删除
-----
待命津贴
正常工作日-加班
公众假期-OT

这就是它的工作原理

---

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

我会这样做：

$（文档）.ready（函数（）{
var repeat='----备用允许正常天数-加班公共假日-加班'；
$（“#添加”）。单击（函数（）{
$（“#表_字段”）。追加（重复）；
});
$（“#表#字段”）。在（'单击'，'删除'，函数（）上{
$（this）.closest（'tr'）.remove（）；
});
//下面是如何捕捉keyup事件
$（document）.on（“keyup”、“#dayhour”，function（））{
控制台日志（“支票金额”）；
支票金额（）；
});
});
函数计算（el）{
//获取num1字段值
var aa=parseFloat（$（el）.closest（'tr'）.find（'[name*=dayhour'）.val（））；
风险价值金额；
var率；
//比较
如果（el.value==“备用余量”）{
费率=300.00；
金额=300.00；
}否则如果（el.value==“正常天数-加班”）{
比率=18.75；
金额=费率*aa；
}else if（el.value==“公共假日-OT”）{
比率=37.50；
金额=费率*aa；
} 
//找到比率和数量，并在那里增值
$（el）.最近（'tr'）.find（'[name*=rate]'）.val（rate）；
$（el）.最近（'tr'）.find（'[name*=amount]'）.val（amount）；
}
函数checkamount（）{
var textValue1=document.getElementById（'dayhour'）.value；
var textValue2=document.getElementById（'rate'）。值；
document.getElementById（'amount'）。value=textValue1*textValue2；
}

加班表

时辰
赌型
比率
数量
添加或删除
-----
待命津贴
正常工作日-加班
公众假期-OT

id应该是一个唯一的值它对我不起作用。你得到的错误是什么？下面的示例是功能性的…在我添加第二行后不会发生任何事情。在我更改小时后金额没有更改。正常情况下，只有在小时字段中键入内容时才会调用checkamount函数。你需要根据需要调整代码。…重点是向您展示，要捕获

keyup

事件，您需要这样做

$（文档）。在（“keyup”、“#dayhour”，function（）{console.log（“checkamount”）；checkamount（）；；