JQuery 转发器中的功能只能使用一次

Question

我正在使用 jquery-repeater 库在 table 中创建动态输入。每行将根据 keyup 事件计算平均值：

=============================
Col A | Col B | Col C | AVG |
=============================
1     | 2     | 3     | 2   |
2     | 3     | 4     | 3   |
...

A、B、C 列是输入字段。用户可以根据需要添加多行，每行将显示最后一列的平均值（AVG）。

这是我的代码（使用 JQuery-repeater 查看）：

$("input[type=number]", "#table").keyup(function() {
  var $parent = $(this).parents('tr');
  var allInputs = $("input[type=number]", $parent);
  var total = 0;
  $.each(allInputs, function() {
    total += $(this).val() === '' ? +0 : +$(this).val();
  });

  $(".avg", $parent).val(total / 3);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table repeater" border="1">
  <thead>
    <tr>
      <th>
        <center>A - B</center>
      </th>
      <th>
        <center>A - C</center>
      </th>
      <th>
        <center>B - C</center>
      </th>
      <th>
        <center>AVG</center>
      </th>
      <th>
        <center>
          <button data-repeater-create id="add_data">
            Add Data
          </button>
        </center>
      </th>
    </tr>
  </thead>
  <tbody data-repeater-list="data">
    <tr data-repeater-item>
      <td><input type="number" name="val1"></td>
      <td><input type="number" name="val2"></td>
      <td><input type="number" name="val3"></td>
      <td><input name="avg" class="avg" readonly></td>
      <td>
        <center>
          <button data-repeater-delete>Delete</button>
        </center>
      </td>
    </tr>
  </tbody>
</table>

我希望该函数可以在每一行中运行，但实际是该函数只能运行一次。

Jsfiddle

Answer 1

您需要为新添加的行附加侦听器。 Modified Fiddle

每次我们将侦听器添加到使用 $("input[type=number]", "#table tr:last-child") 添加的最后一行。

$('.repeater').repeater({
  show: function() {
    $(this).slideDown();
    attachListeners();
  }
});

function attachListeners() {
  $("input[type=number]", "#table tr:last-child").keyup(function() {
    var $parent = $(this).parents('tr');
    var allInputs = $("input[type=number]", $parent);
    var total = 0;
    $.each(allInputs, function() {
      total += $(this).val() === '' ? +0 : +$(this).val();
    });

    $(".avg", $parent).val(total / 3);
  });
}

attachListeners();

Answer 2

因为您的行是动态创建的，所以您需要以这种方式向其添加事件：

$(document).on("keyup", "#table input[type=number]", function(){})

Working fiddle

JQuery 转发器中的功能只能使用一次

JQuery function in repeater only works once

html

jquery

jquery.repeater