javascript - 追加された行でjQueryが機能しない

Question

ユーザーが複数の株式エントリを実行できるようにするテーブルがあります

<table class="table1" id="table1">
  <thread>
    <tr>
      <th scope="col">Item Name</th>
      <th scope="col">Qty</th>
      <th scope="col">Rate</th>
      <th scope="col">Amount</th>
    </tr>
  </thread>
  <tbody>
    <tr>
     <td><input type="text"/></td>
     <td><input type="text" class="num" id="qty"/></td>
     <td><input type="text" class="num" id="rate"/></td>
     <td><input type="text" class="num" id="amt"/></td>
   </tr>
 </tbody>
</table>
<a id="add"><button>Add</button></a>

そして、このコードは新しい行を追加することです:

<script type="text/javascript">
  $(document).ready(function() {
    $("#add").click(function() {
      var newrow = $("<tr><td><input type="text"/></td><td><input type=\"text\" id=\"qty\"/></td><td><input type="\text\" id="\rate\"/></td><td><input type="\text\" id="\amt\"/></td></tr>");
    newrow.insertAfter('#table1 tbody>tr:last');
    return false;
  });
  $(".num").keyup(function() {
    var id = $(this).attr('id');
    if (id == 'qty') {
      var i = parseFloat($("#rate").val())
      if (!isNaN(i)) {
        var t = ($(this).val()*$("#rate").val());
        $("#amt").val(t.toFixed(2));
      } else {
        $("#amt").val('');
      }
    } else if (id == 'rate') {
      var i = parseFloat($("#qty").val())
      if (!isNaN(i)) {
        var t = ($(this).val()*$("#qty").val());
        $("#amt").val(t.toFixed(2));
      } else {
        $("#amt").val('');
      }
    }
  });
});

計算はテーブルの最初の行で完全に機能していますが、2 行目を追加すると計算が機能しません。どこが間違っていますか？

score 5 · Accepted Answer

イベント委任を使用します。

$('body').on('keyup', ".num", function() {
    // your code
});

また、作成した要素にクラス.numを追加する必要があり、複数の要素に同じ ID を使用することはできません。代わりに別の属性を使用します ( などdata-id、問題ではありません)。

var newrow = $('<tr><td><input type="text" /></td><td><input type="text" class="num" data-id="qty"/></td><td><input type="text" data-id="rate"/></td><td><input type="text" class="num" data-id="amt" /></td></tr>');

そして、あなたの関数では、この属性でそれらを取得します:

$('body').on('keyup', ".num", function() {
    var $row = $(this).closest('tr');
    var $amt = $row.find('[data-id="amt"]');
    var $qty = $row.find('[data-id="qty"]');
    var $rate = $row.find('[data-id="rate"]');

    var id = $(this).attr('data-id');

    if (id == 'qty') {
        // now using `$rate` instead of $('#rate')
        var i = parseFloat($rate.val())

        // other code
    }

    // other code
});

score 0 · Accepted Answer

これを試して

<table class="table1" id="table1">
        <thread>
    <tr>
      <th scope="col">Item Name</th>
      <th scope="col">Qty</th>
      <th scope="col">Rate</th>
      <th scope="col">Amount</th>
    </tr>
  </thread>
        <tbody>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" class="num" name="qty" id="qty" />
                </td>
                <td>
                    <input type="text" class="num" id="rate" name="rate" />
                </td>
                <td>
                    <input type="text" class="num" id="amt" name="amt" />
                </td>
            </tr>
        </tbody>
    </table>
    <a id="add">
        <button>
            Add</button></a>


     <script type="text/javascript">
    $(document).ready(function () {
        $("#add").click(function () {
            var newrow = $('<tr><td><input type="text"></td><td><input type="text" id="qty" name="qty" class="num"></td><td><input type="text" id="rate" name="rate" class="num"></td><td><input type="text" id="amt" name="amt" class="num"></td></tr>');
            newrow.insertAfter('#table1 tbody>tr:last');


            $('#table1 tbody>tr:last').find('[name="qty"]').keyup(function () {
                var this_tr = $(this).closest('tr');
                ;
                var i = parseFloat(this_tr.find('[name="rate"]').val())
                if (!isNaN(i)) {
                    var t = ($(this).val() * this_tr.find('[name="rate"]').val());
                    this_tr.find('[name="amt"]').val(t.toFixed(2));
                } else {
                    this_tr.find('[name="amt"]').val('');
                }
            });
            $('#table1 tbody>tr:last').find('[name="rate"]').keyup(function () {
                var this_tr = $(this).closest('tr');
                ;
                var i = parseFloat(this_tr.find('[name="qty"]').val())
                if (!isNaN(i)) {
                    var t = ($(this).val() * this_tr.find('[name="qty"]').val());
                    this_tr.find('[name="amt"]').val(t.toFixed(2));
                } else {
                    this_tr.find('[name="amt"]').val('');
                }
            });
            return false;
        });
        $('[name="qty"]').keyup(function () {
            var this_tr = $(this).closest('tr');
            ;
            var i = parseFloat(this_tr.find('[name="rate"]').val())
            if (!isNaN(i)) {
                var t = ($(this).val() * this_tr.find('[name="rate"]').val());
                this_tr.find('[name="amt"]').val(t.toFixed(2));
            } else {
                this_tr.find('[name="amt"]').val('');
            }
        });
        $('[name="rate"]').keyup(function () {
            var this_tr = $(this).closest('tr');
            ;
            var i = parseFloat(this_tr.find('[name="qty"]').val())
            if (!isNaN(i)) {
                var t = ($(this).val() * this_tr.find('[name="qty"]').val());
                this_tr.find('[name="amt"]').val(t.toFixed(2));
            } else {
                this_tr.find('[name="amt"]').val('');
            }
        });

    });
</script>

score 0 · Accepted Answer

$('#table1')この問題は、ページ上のすべての要素の親である場合のように、既存のクローゼットの親へのイベント委任によって解決できる $(document)ため、これを変更する必要があります。

$(".num").keyup(function() {

これに：

$("#table").on('keyup', '.num', function() {

クリックして追加したときに同じ ID を追加しているため、同じページ内で ID が一意である必要があるため、無効な HTML マークアップが発生するのを確認しました ( same ids for multiple elems is invalid)。

 var newrow = $("<tr><td><input type='text'/></td>"+
                "<td><input type='text' id='qty'/></td>"+
                "<td><input type='text' id='rate'/></td>"+
                "<td><input type='text' id='amt'/></td></tr>");

上記のものは、dom に追加されたときに、複数の要素に同じ id を毎回追加します。この方法を試すことができます：

  $("#add").click(function () {
    var i = $("#table1 tbody>tr:last").index();
    var newrow = $("<tr><td><input type='text'/></td>" +
        "<td><input type='text' class='num' id='qty" + (i) + "'/></td>" +
        "<td><input type='text' class='num' id='rate" + (i) + "'/></td>" +
        "<td><input type='text' class='num' id='amt" + (i) + "'/></td>");
    newrow.insertAfter('#table1 tbody>tr:last');
    return false;
});

javascript - 追加された行でjQueryが機能しない

4 に答える 4

Related

Reference