Javascript jQuery无法处理添加的行

我有一个表，允许用户做多个股票输入

<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('');
      }
    }
  });
});

$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
var newrow=$（“”）；
newrow.insertAfter（“#表1 tbody>tr:last”）；
返回false；
});
$（“.num”）.keyup（函数（）{
var id=$（this.attr（'id'）；
如果（id=‘数量’）{
var i=parseFloat（$（“#rate”）.val（）
如果（！isNaN（i））{
var t=（$（this.val（）*$（“#rate”）.val（））；
美元（“#金额”）.val（t.toFixed（2））；
}否则{
美元（“#金额”）.val（“”）；
}
}否则，如果（id='rate'）{
var i=parseFloat（$（“#数量”）.val（））
如果（！isNaN（i））{
var t=（$（this.val（）*$（“#qty”）.val（））；
美元（“#金额”）.val（t.toFixed（2））；
}否则{
美元（“#金额”）.val（“”）；
}
}
});
});

在表的第一行上，计算工作正常，但当我添加第二行时，计算不起作用。我错在哪里？

使用事件委派：

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

还必须将class

.num

添加到创建的元素中， 而对于多个元素，不能使用相同的ID 使用另一个属性（如

数据id

，这无关紧要）

使用事件委派：

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

还必须将class

.num

添加到创建的元素中， 而对于多个元素，不能使用相同的ID 使用另一个属性（如

数据id

，这无关紧要）

---

为新行指定

num

类（您的新输入没有），并使用

。on

：

$(document).on('keyup', '.num', function() {

});

如果要向DOM中尚未包含的元素添加事件侦听器，则需要执行此操作

---

此外，元素ID应该是唯一的。您的新输入获得的ID与前一行相同。

为新行指定

num

类（您的新输入没有），然后使用

。on

：

$(document).on('keyup', '.num', function() {

});

如果要向DOM中尚未包含的元素添加事件侦听器，则需要执行此操作

此外，元素ID应该是唯一的。新输入的ID与前一行相同。

试试这个

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

项目名称
数量
比率
数量
添加
$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
var newrow=$（''）；
newrow.insertAfter（“#表1 tbody>tr:last”）；
$（'#table1 tbody>tr:last'）.find（'[name=“qty”]'）.keyup（函数（）{
var this_tr=$（this.nexist（'tr'）；
;
var i=parseFloat（这个查找（'[name=“rate”]'）.val（））
如果（！isNaN（i））{
var t=（$（this.val（）*this_tr.find（'[name=“rate”]'）.val（））；
这是find（'[name=“amt”]'）.val（t.toFixed（2））；
}否则{
这是一个查找（'[name=“amt”]'）.val（''）；
}
});
$（'#table1 tbody>tr:last'）.find（'[name=“rate”]'）.keyup（函数（）{
var this_tr=$（this.nexist（'tr'）；
;
var i=parseFloat（这个查找（'[name=“qty”]'）.val（））
如果（！isNaN（i））{
var t=（$（this.val（）*this_tr.find（'[name=“qty”]'）.val（））；
这是find（'[name=“amt”]'）.val（t.toFixed（2））；
}否则{
这是一个查找（'[name=“amt”]'）.val（''）；
}
});
返回false；
});
$（'[name=“qty”]'）。键控（函数（）{
var this_tr=$（this.nexist（'tr'）；
;
var i=parseFloat（这个查找（'[name=“rate”]'）.val（））
如果（！isNaN（i））{
var t=（$（this.val（）*this_tr.find（'[name=“rate”]'）.val（））；
这是find（'[name=“amt”]'）.val（t.toFixed（2））；
}否则{
这是一个查找（'[name=“amt”]'）.val（''）；
}
});
$（'[name=“rate”]'）。键控（函数（）{
var this_tr=$（this.nexist（'tr'）；
;
var i=parseFloat（这个查找（'[name=“qty”]'）.val（））
如果（！isNaN（i））{
var t=（$（this.val（）*this_tr.find（'[name=“qty”]'）.val（））；
这是find（'[name=“amt”]'）.val（t.toFixed（2））；
}否则{
这是一个查找（'[name=“amt”]'）.val（''）；
}
});
});

试试这个

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

项目名称
数量
比率
数量
添加
$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
var newrow=$（''）；
newrow.insertAfter（“#表1 tbody>tr:last”）；
$（'#table1 tbody>tr:last'）.find（'[name=“qty”]'）.keyup（函数（）{
var this_tr=$（this.nexist（'tr'）；
;
var i=parseFloat（这个查找（'[name=“rate”]'）.val（））
如果（！isNaN（i））{
var t=（$（this.val（）*this_tr.find（'[name=“rate”]'）.val（））；
这是find（'[name=“amt”]'）.val（t.toFixed（2））；
}否则{
这是一个查找（'[name=“amt”]'）.val（''）；
}
});
$（'#table1 tbody>tr:last'）.find（'[name=“rate”]'）.keyup（函数（）{
var this_tr=$（t
$("#table").on('keyup', '.num', 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>");

  $("#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;
});