jquery - 验证不起作用动态添加的表行

Question

我有一个表，可以通过单击添加按钮添加行。数量和项目名称必填字段。动态附加行的验证不起作用。第一行显示验证。但添加的行不显示验证。

$("#frmGroupMaster").validate({
  errorClass: "has-error",
  pendingClass: "has-warning",
  validClass: "has-success",
  rules: {
    selectItem: "required",
    Quantity: "required",
  },
  messages: {
    selectItem: "please enter atleast one item",
    Quantity: "please enter the quantity",
  }
});

$('#btnAdd').click(function(event) {
  if ($("#frmGroupMaster").valid()) {
    var parentItemMaster = '<tr><td class="btnItem">' + $($($(this).closest("tr").find(".selectItem")).parent()).html() + '</td>' +
      '<td><input type="text" class="form-control txtBarcode"  readonly="true"/></td>' +
      '<td><input type="text" class="form-control txtQty " name="Quantity"/></td>' +
      '<td><input type="text" class="form-control txtPrice"  readonly="true"/></td>' +
      '<td><input type="text" class="form-control txtTotal"  disabled="disabled"/></td>' +
      '<td><input type="button" value="Delete" class="form-control btn btn-danger btndelete" id="btndelete" /></td></tr>';
    $("#tblGroupItemDetails tbody").append(parentItemMaster);
  }

  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form id="frmGroupMaster">
<table class="table table-bordered table-hover table-condensed table table-responsive GroupItemDetails" id="tblGroupItemDetails">
  <thead class="small">
    <tr>
      <th>Item Name</th>
      <th>Barcode</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tdItemMaster">
      <td class="btnItem">
        <select class="form-control selectItem" name="selectItem">
          <option value="">Select</option>
          <option value="ItemID1">ItemName 1</option>
          <option value="ItemID2">ItemName 2</option>
        </select>
      </td>
      <td class="btnBarcode">
        <input type="text" class="form-control txtBarcode" readonly="true" />
      </td>
      <td>
        <input type="text" class="form-control txtQty" name="Quantity" />
      </td>
      <td class="txtPrice">
        <input type="text" class="form-control txtPrice" readonly="true" />
      </td>
      <td class="btnTotal">
        <input type="text" class="form-control txtTotal" disabled="disabled" />
      </td>
      <td>
        <input type="button" value="Add" class="form-control btn btn-success" id="btnAdd" />
      </td>
    </tr>
  </tbody>
</table>
</form>

标签： jqueryhtml