javascript - 一个输入字段值不应大于表的其他字段值

Question

我再次问这个问题，因为我有一个新问题。我有两个输入字段，一个用于预付款，另一个用于全额付款，它们是从数据库中获取的数组。

如果onchange或keyup预付款大于全款，则预付款不应输入或应等于全款。

我以前得到了以下对我有用的答案，但现在我有一个新问题。它适用于以数组形式从数据库中获取的现有数据。但是，当我使用 JavaScript 添加新行时，它无法正常工作。

我正在尝试使用这段代码

$('.advance').on('change keyup blur', function(e) {
    id_arr = $(this).attr('id');
    id = id_arr.split("_");
    var fullPay = $('#fullPayment_' + id[1]).val();
    var advancePay = $('#advancePayment_' + id[1]).val();
    if ($(this).val() > parseInt(fullPay)) {
        e.preventDefault();
        $(this).val(fullPay);
    }
});


var i = $('table tr').length;

$("#newRow").on('click', function() {
    html = '<tr>';
    html += '<td><input type="number" value="15" id="fullPayment_' + i + '"></td>';

    html += '<td><input type="number" id="advancePayment_' + i + '" class="advance"></td>';

    html += '</tr>';
    $('table').append(html);
    i++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <input type="number" value="12" id="fullPayment_1">
        </td>
        <td>
            <input type="number" id="advancePayment_1" class="advance">
        </td>
    </tr>
    <tr>
        <td>
            <input type="number" value="19" id="fullPayment_2">
        </td>
        <td>
            <input type="number" id="advancePayment_2" class="advance">
        </td>
    </tr>
</table>
<button type="button" id="newRow"> + Add </button>

Answer 1

尝试将事件处理程序更改为这种格式:

$(document).on('change keyup blur','.advance', function(e){... });

更多关于事件委托(delegate)的信息:https://learn.jquery.com/events/event-delegation/

演示:http://jsfiddle.net/GCu2D/3643/

$(document).on('change keyup blur', '.advance', function(e) {
  id_arr = $(this).attr('id');
  id = id_arr.split("_");
  var fullPay = $('#fullPayment_' + id[1]).val();
  var advancePay = $('#advancePayment_' + id[1]).val();
  if ($(this).val() > parseInt(fullPay)) {
    e.preventDefault();
    $(this).val(fullPay);
  }
});


var i = $('table tr').length;
$("#newRow").on('click', function() {
  html = '<tr>';
  html += '<td><input type="number" value="15" id="fullPayment_' + i + '"></td>';

  html += '<td><input type="number" id="advancePayment_' + i + '" class="advance"></td>';

  html += '</tr>';
  $('table').append(html);
  i++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="number" value="12" id="fullPayment_1"></td>
    <td><input type="number" id="advancePayment_1" class="advance"></td>
  </tr>
  <tr>
    <td><input type="number" value="19" id="fullPayment_2"></td>
    <td><input type="number" id="advancePayment_2" class="advance"></td>
  </tr>
</table>
<button type="button" id="newRow"> + Add </button>