JavaScript 循环不适用于 Django Formset 字段计算，仅计算一个具有 ID 的表单集字段，例如 id_forms-0-rate

Question

这是我的模板中的代码，它从输入字段id中获取值并计算值。代码仅适用于一个表单集字段或项，例如id=id_form-0-rate的字段或项。我不知道为什么循环不适用于添加的表单集，例如id=id_form-1-rate的表单集

template.html

<script type = "text/javascript" >
var id= $("#id_form-TOTAL_FORMS").val();
console.log(id); 
for(let i=0; i<10; i++)
{
console.log(i);
$("#id_form-" + i + "-quantity").keyup(function () {
var rate = parseFloat($("#id_form-" + i + "-rate").val());
var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
var discount = parseFloat($("#id_form-" + i + "-discount").val());
$("#id_form-" + i + "-amount").val(rate * quantity - discount);
});
$("#id_form-" + i + "-rate").keyup(function () {
var rate = parseFloat($("#id_form-" + i + "-rate").val());
var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
var discount = parseFloat($("#id_form-" + i + "-discount").val());
$("#id_form-" + i + "-amount").val(rate * quantity - discount);
});
$("#id_form-" + i + "-discount").keyup(function () {
var rate = parseFloat($("#id_form-" + i + "-rate").val());
var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
var discount = parseFloat($("#id_form-" + i + "-discount").val());
$("#id_form-" + i + "-amount").val(rate * quantity - discount);
});
}
</script>

Answer 1

不需要复杂的代码。只需要这些线路：

<script>
$(document).on('keyup',"input[id$='-quantity']",fn);
$(document).on('keyup',"input[id$='-rate']",fn);
$(document).on('keyup',"input[id$='-discount']",fn);
function fn(){
var rate = parseFloat($(this).closest("#parent").find("input[id$='-rate']").val());
var quantity = parseFloat($(this).closest("#parent").find("input[id$='-quantity']").val());
var discount = parseFloat($(this).closest("#parent").find("input[id$='-discount']").val());
$(this).closest("#parent").find("input[id$='-amount']").val(rate * quantity - discount);
};
</script>
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<div id="parent">
{{ form.as_p }}
</div>
{% endfor %}