javascript - django 模板内的表单未监听 keyup 事件

Question

我是第一次使用 javascript 和 django。在我的表单中，我需要显示两个字段(即数量和费率)计算得出的基本金额。为此，我做了以下事情

{% block content %}
<div class="right_col" role="main">
    <h1 class="text-center"> Purchase Order</h1>
    <div class="space"></div>
    <!-- {%include 'includes/form.html'%} -->
    {%include 'dashboard/purchase_order/purchase_order_form.html'%}
</div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script>
    $(document).ready(function() {
      console.log('dom is ready');
      $('#form-change').keyup(function() {
        console.log('form')
        var quantity = document.getElementById('id_quantity').value;
        var rate = document.getElementById('id_rate').value;
        if (quantity && rate) {
          document.getElementById('id_basic_amount').value = parseInt(quantity) * parseInt(rate);
        }
      })
    })
  </script>
{% endblock javascripts %}


<form id="demo-form2 form-change" class="form-horizontal form-label-left" action="" method="post" enctype="multipart/form-data">
   {% csrf_token %}
   <div class="form-group">
      <div class="col-md-6 col-sm-6 col-xs-12">
         <input type="number" name="quantity" value="0" min="0" class="form-control col-md-7 col-xs-12" required="" id="id_quantity">
      </div>
   </div>
   <div class="form-group">
      <div class="col-md-6 col-sm-6 col-xs-12">
         <input type="number" name="rate" value="0.0" step="0.01" class="form-control col-md-7 col-xs-12" required="" id="id_rate">
      </div>
   </div>
   <div class="form-group">
      <div class="col-md-6 col-sm-6 col-xs-12">
         <input type="number" name="basic_amount" value="0.0" step="0.01" class="form-control col-md-7 col-xs-12" required="" id="id_basic_amount">
      </div>
   </div>
</form>

但是 keyup 事件没有被监听。行 console.log('dom is read') 显示在控制台中，但行 console.log('form') 不在控制台中进行控制台。我在 jsbin 中尝试了单独的 javascript，它正在工作

http://jsbin.com/hadafezeqa/edit?html,console,output

为什么它不能仅在 django 模板中工作？

Answer 1

尝试将 keyup 事件绑定(bind)到表单元素之一，而不是表单本身。尝试更改表单的输入，如下所示:

 <input type="number" name="quantity" value="0" min="0" class="form-control col-md-7 col-xs-12 form-change" required="" id="id_quantity">

还有:

<input type="number" name="rate" value="0.0" step="0.01" class="form-control col-md-7 col-xs-12 form-change" required="" id="id_rate">

并将 $('#form-change').keyup() 更改为 $('.form-change').keyup()

希望您能看到控制台。

或者

更改表单 ID。

<form id="demo-form2 form-change">

致:

<form id="form-change">