jquery - 简单的计算器添加更多行

我正在制作简单的计算器，并尝试通过jQuery添加更多行，但是它们不起作用。为什么其他行不起作用？

$('.product').keyup(function() {
  var total = (this.value * $(this).next('.qty').val()) || 0;
  $(this).next().next('.total').val(total);
  var dis = (total * $(this).next().next().next('.dis').val() / 100) || 0;
  var grand = (total - dis) || 0;
  $(this).next().next().next().next('.grand').val(grand);
}).keyup();

$('.qty').keyup(function() {
  var total = (this.value * $(this).prev('.product').val()) || 0;
  $(this).next('.total').val(total);
  var dis = (total * $(this).next().next('.dis').val() / 100) || 0;
  var grand = (total - dis) || 0;
  $(this).next().next().next('.grand').val(grand);
}).keyup();

$('.dis').keyup(function() {
  var total = ($(this).prev('.total').val()) || 0;
  var dis = (total * this.value / 100) || 0;
  var grand = (total - dis) || 0;
  $(this).next('.grand').val(grand);
}).keyup();

$(document).ready(function() {
  $("#btn1").click(function() {
    $(".tableblock").append('<div class="w-100 d-none d-md-block"></div><input type="text" onkeydown="return ( event.ctrlKey || event.altKey || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) || (95<event.keyCode && event.keyCode<106) || (event.keyCode==8) || (event.keyCode==9) || (event.keyCode>34 && event.keyCode<40) || (event.keyCode==46) )" id="product" class="product" name="fir" /> <input type="text" id="qty" class="qty" name="qty" value="1" /> <input type="text" id="total" class="total" name="total" readonly/> <input type="text" id="dis" class="dis" name="dis" value="20" maxlength="2"/> <input type="text" id="grand" class="grand" name="grand" readonly/>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableblock">
  <input type="text" onkeydown="return ( event.ctrlKey || event.altKey
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9)
                    || (event.keyCode>34 && event.keyCode<40)
                    || (event.keyCode==46) )" id="product" class="form-control product" name="fir" />
  <input type="text" id="qty" class="form-control qty" name="qty" value="1" />
  <input type="text" id="total" class="form-control total" name="total" readonly/>
  <input type="text" id="dis" class="form-control dis" name="dis" value="20" maxlength="2" />
  <input type="text" id="grand" class="form-control grand" name="grand" readonly/>


</div>
<button id="btn1" class="btn btn-primary">+</button>

最佳答案

由于下一行是动态附加的（在DOM之后），因此您需要使用.on

$(document).on('keyup', '.product', function() {
  var total = (this.value * $(this).next('.qty').val()) || 0;
  $(this).next().next('.total').val(total);
  var dis = (total * $(this).next().next().next('.dis').val() / 100) || 0;
  var grand = (total - dis) || 0;
  $(this).next().next().next().next('.grand').val(grand);
}).keyup();

$(document).on('keyup', '.qty', function() {
  var total = (this.value * $(this).prev('.product').val()) || 0;
  $(this).next('.total').val(total);
  var dis = (total * $(this).next().next('.dis').val() / 100) || 0;
  var grand = (total - dis) || 0;
  $(this).next().next().next('.grand').val(grand);
}).keyup();

$('.dis').on('keyup', function() {
  var total = ($(this).prev('.total').val()) || 0;
  var dis = (total * this.value / 100) || 0;
  var grand = (total - dis) || 0;
  $(this).next('.grand').val(grand);
}).keyup();

$(document).ready(function() {
  $(document).on('click', "#btn1", function() {
    $(".tableblock").append('<div class="w-100 d-none d-md-block"></div><input type="text" onkeydown="return ( event.ctrlKey || event.altKey || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) || (95<event.keyCode && event.keyCode<106) || (event.keyCode==8) || (event.keyCode==9) || (event.keyCode>34 && event.keyCode<40) || (event.keyCode==46) )" id="product" class="product" name="fir" /> <input type="text" id="qty" class="qty" name="qty" value="1" /> <input type="text" id="total" class="total" name="total" readonly/> <input type="text" id="dis" class="dis" name="dis" value="20" maxlength="2"/> <input type="text" id="grand" class="grand" name="grand" readonly/>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableblock">
  <input type="text" onkeydown="return ( event.ctrlKey || event.altKey
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9)
                    || (event.keyCode>34 && event.keyCode<40)
                    || (event.keyCode==46) )" id="product" class="form-control product" name="fir" />
  <input type="text" id="qty" class="form-control qty" name="qty" value="1" />
  <input type="text" id="total" class="form-control total" name="total" readonly/>
  <input type="text" id="dis" class="form-control dis" name="dis" value="20" maxlength="2" />
  <input type="text" id="grand" class="form-control grand" name="grand" readonly/>


</div>
<button id="btn1" class="btn btn-primary">+</button>

关于jquery - 简单的计算器添加更多行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50549768/