jQuery不适用于添加的行[重复]答案

【问题标题】：jQuery not working on added rows [duplicate]jQuery不适用于添加的行[重复]
【发布时间】：2013-06-06 22:47:41
【问题描述】：

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

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

计算在表格的第一行上运行良好，但是当我添加第二行时，计算不起作用。我哪里错了？

【问题讨论】：

让我猜猜，它只计算第一行？
如果您这样做，您将拥有多个具有相同 ID 的 td，这不是正确的 html。尝试使用类而不是 id。例如：class="qty" 而不是 id="qty"

标签： javascript jquery html

【解决方案1】：

使用事件委托：

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

【讨论】：

我已经尝试过了，但它没有在 keyup 事件中触发
@MandeepSingh 您正在运行哪个版本的 jQuery？它必须至少是1.7。
请帮助如何在 xampp 中更新 jquery 版本

【解决方案2】：

为新行提供num 类（您的新输入没有它），并使用.on：

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

});

如果您想为尚未在 DOM 中的元素添加事件侦听器，这是必需的。

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

【讨论】：

你的意思是在 jquery 中我必须在每次点击 add 时提供新的 id？
不，我会删除 ID，您不需要它们。只需使用类。

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

这个问题可以通过事件委托给现有的 closet 父级来解决，例如在您的情况下是 $('#table1') 或 $(document) 这是页面上所有元素的父级，因此您需要更改此：

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

到这里：

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

我刚刚看到您的添加，您在单击添加时添加了相同的 id，因此由于 id 在同一页面中应该是唯一的 (same ids for multiple elems is invalid)，因此导致无效的 html 标记。

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

【讨论】：