Javascript jQuery HTML有效性不适用于被操纵的DOM元素

我正在对输入字段进行验证。第一次在输入字段中添加输入时，验证工作正常。因为可以添加多个字段（将其视为向表中添加另一行），所以我在单击“添加”时操作输入字段（该行被克隆，然后添加到表的底部）

添加第二行时，HTML验证不再工作，并且在元素上执行

elem.checkValidity（）

时始终为true。我在控制台中没有看到任何错误，并且验证属性在DOM操作期间没有更改。我还检查了浏览器之间是否存在差异，但Chrome和Firefox的行为是相同的

我猜在操作之后，我不得不重新绑定元素的有效性，但我不确定

代码如下：

HTML输入字段

 <input type="number" min="0" max="1" step="0.0001" id="trapezoid_x" class="form-control input_trapezoid trapezoid_x" placeholder="Position x">
 <input type="number" min="0" max="1" step="0.0001" id="trapezoid_p" class="form-control input_trapezoid trapezoid_p" placeholder="Probability">

添加梯形并操纵DOM时的代码

function handleClickAddTrapezoidBtn() {
  const removeIcon = $("<i>").addClass("fas fa-trash");
  const removeTrapezoidBtn = $("<button>").attr({"type": "button"})
                                          .addClass("btn btn-outline-danger trapezoid_remove_btn")
                                          .append(removeIcon);
  const saveIcon = $("<i>").addClass("fas fa-check");
  const saveTrapezoidBtn = $("<button>").attr({"type": "button"}) 
                                        .addClass("btn btn-outline-success trapezoid_save_btn")
                                         .append(saveIcon);
  const clonedTrapezoidFormGroup = $(".trapezoid_form_group").last().clone();
  const valX = parseFloat($(".trapezoid_x").last().val());
  const valP = parseFloat($(".trapezoid_p").last().val());
  const idx = $(".trapezoid_form_group").length -= 1;
  let trapezoids = currentTrapezoids().length > 0 ? currentTrapezoids() : [];
  const inputFields = [$("#trapezoid_x")[0], $("#trapezoid_p")[0]];
  let invalidInput = {};

  $(inputFields).each(function(i, d) {
    validInputFields(d, invalidInput);
  });

  if (!$.isEmptyObject(invalidInput)) { return }
  if (!checkPositionXValue($(".trapezoid_x:last"))) { return }

  $(clonedTrapezoidFormGroup).attr("data-idx", idx).addClass("added_trapezoid");
  $(clonedTrapezoidFormGroup).find(".trapezoid_x").val(valX);
  $(clonedTrapezoidFormGroup).find(".trapezoid_p").val(valP);
  $(clonedTrapezoidFormGroup).find("#add_trapezoid").remove();
  $(clonedTrapezoidFormGroup).find(".input-group-append").append(saveTrapezoidBtn);
  $(clonedTrapezoidFormGroup).find(".input-group-append").append(removeTrapezoidBtn);
  $(clonedTrapezoidFormGroup).find(".invalid-feedback").remove();
  $(clonedTrapezoidFormGroup).find(".trapezoid_x").removeClass("input-warning");
  $(".trapezoid_form_group").last().before(clonedTrapezoidFormGroup);
  $(".trapezoid_x").last().val("");
  $(".trapezoid_p").last().val("");
  $(".trapezoid_form_group").find(".invalid-feedback")
                            .removeClass("input-warning")
                            .empty();
  $(".trapezoid_form-group").find(".trapezoid_x").removeClass("input-warning");

  let data = [];
  data.push(valX);
  data.push(valP);
  trapezoids.push(data);
  sortTrapezoids(trapezoids);
  currentTrapezoids(trapezoids);

  $(".trapezoid_x").last().focus();

  $(removeTrapezoidBtn).bind("click", handleClickRemoveTrapezoidBtn);
  $(saveTrapezoidBtn).bind("click", handleClickSaveTrapezoidBtn);
}

函数handleClickAdd梯形BTN（）{
const removecon=$（“”）.addClass（“fas fa垃圾”）；
const removeTrapezoidBtn=$（“”）。attr（{“type”：“button”}）
.addClass（“btn btn轮廓危险梯形\u移除\u btn”）
.追加（删除）；
常量saveIcon=$（“”）.addClass（“fas fa检查”）；
常量save梯形体btn=$（“”）.attr（{“类型”：“按钮”}）
.addClass（“btn btn轮廓成功梯形\u保存\u btn”）
.append（保存图标）；
常量cloned梯形图组=$（“.梯形图组”）.last（）.clone（）；
const valX=parseFloat（$（“.梯形_x”）.last（）.val（））；
const valP=parseFloat（$（“.梯形_p”）.last（）.val（））；
常量idx=$（“.梯形”形式的组）。长度-=1；
设梯形=当前梯形（）。长度>0？当前梯形（）：[]；
常量输入字段=[$（“#梯形#x”）[0]，$（“#梯形#p”）[0]；
设invalidInput={}；
$（输入字段）。每个（函数（i，d）{
有效输入字段（d，无效输入）；
});
如果（！$.isEmptyObject（invalidInput））{return}
if（！checkPositionXValue（$（“.梯形_x:last”）{return}
$（Cloned梯形FormGroup）.attr（“数据idx”，idx）.addClass（“添加的梯形”）；
$（克隆梯形图组）.find（“.梯形图组”）.val（valX）；
$（克隆梯形图组）.find（“.梯形图组”）.val（valP）；
$（Cloned梯形FormGroup）。查找（“添加梯形”）.remove（）；
$（Cloned梯形图FormGroup）.find（“.input group append”）.append（save梯形图BTN）；
$（cloned梯形图组）.find（“.input group append”）.append（removeTrapezoidBtn）；
$（Cloned梯形FormGroup）。查找（“.invalid feedback”）.remove（）；
$（Cloned梯形FormGroup）.find（“.梯形_x”）.removeClass（“输入警告”）；
$（“.梯形形式”组“）.last（）。之前（克隆梯形形式组）；
$（“.梯形_x”）.last（）.val（“”）；
$（“.梯形_p”）.last（）.val（“”）；
$（“.梯形形式组”）.find（“.invalid feedback”）
.removeClass（“输入警告”）
.empty（）；
$（“.梯形_表单组”）.find（“.梯形_x”）.removeClass（“输入警告”）；
让数据=[]；
数据推送（valX）；
数据推送（valP）；
梯形。推（数据）；
sortTrapezoids（梯形）；
电流梯形（梯形）；
$（“.梯形_x”）.last（）.focus（）；
$（removeTrapezoidBtn）.bind（“单击”，handleClickRemoveTrapezoidBtn）；
$（Save梯形BTN）.bind（“单击”，HandleClickSave梯形BTN）；
}

我已经找出了问题的原因。我正在克隆输入字段，以便稍后将它们添加到表中。在执行此操作时，我还克隆了输入字段的ID并将其添加到页面中。当检查输入字段的有效性时，它将采用输入字段的ID

如果页面上存在超过1个相同ID，则将使用第一个ID。在我的例子中，它是克隆的输入字段

我通过检查console.log检查了哪个字段

---

我正在从克隆的元素中删除ID，现在它可以正常工作。

创建DOM时，验证将初始化，因此您可能需要在document ready函数之外为表单设置验证设置。谢谢您的评论@dickriche。我已经找到了问题所在。因为我在克隆它，所以它也克隆了输入元素的ID。在检查输入字段时，它采用元素的ID。如果您有多个具有相同ID的字段，它将采用在页面上找到的第一个字段。我正在从克隆的输入字段中删除ID，现在它将进行验证。

function handleClickAddTrapezoidBtn() {
  const removeIcon = $("<i>").addClass("fas fa-trash");
  const removeTrapezoidBtn = $("<button>").attr({"type": "button"})
                                          .addClass("btn btn-outline-danger trapezoid_remove_btn")
                                          .append(removeIcon);
  const saveIcon = $("<i>").addClass("fas fa-check");
  const saveTrapezoidBtn = $("<button>").attr({"type": "button"}) 
                                        .addClass("btn btn-outline-success trapezoid_save_btn")
                                         .append(saveIcon);
  const clonedTrapezoidFormGroup = $(".trapezoid_form_group").last().clone();
  const valX = parseFloat($(".trapezoid_x").last().val());
  const valP = parseFloat($(".trapezoid_p").last().val());
  const idx = $(".trapezoid_form_group").length -= 1;
  let trapezoids = currentTrapezoids().length > 0 ? currentTrapezoids() : [];
  const inputFields = [$("#trapezoid_x")[0], $("#trapezoid_p")[0]];
  let invalidInput = {};

  $(inputFields).each(function(i, d) {
    validInputFields(d, invalidInput);
  });

  if (!$.isEmptyObject(invalidInput)) { return }
  if (!checkPositionXValue($(".trapezoid_x:last"))) { return }

  $(clonedTrapezoidFormGroup).attr("data-idx", idx).addClass("added_trapezoid");
  $(clonedTrapezoidFormGroup).find(".trapezoid_x").val(valX);
  $(clonedTrapezoidFormGroup).find(".trapezoid_p").val(valP);
  $(clonedTrapezoidFormGroup).find("#add_trapezoid").remove();
  $(clonedTrapezoidFormGroup).find(".input-group-append").append(saveTrapezoidBtn);
  $(clonedTrapezoidFormGroup).find(".input-group-append").append(removeTrapezoidBtn);
  $(clonedTrapezoidFormGroup).find(".invalid-feedback").remove();
  $(clonedTrapezoidFormGroup).find(".trapezoid_x").removeClass("input-warning");
  $(".trapezoid_form_group").last().before(clonedTrapezoidFormGroup);
  $(".trapezoid_x").last().val("");
  $(".trapezoid_p").last().val("");
  $(".trapezoid_form_group").find(".invalid-feedback")
                            .removeClass("input-warning")
                            .empty();
  $(".trapezoid_form-group").find(".trapezoid_x").removeClass("input-warning");

  let data = [];
  data.push(valX);
  data.push(valP);
  trapezoids.push(data);
  sortTrapezoids(trapezoids);
  currentTrapezoids(trapezoids);

  $(".trapezoid_x").last().focus();

  $(removeTrapezoidBtn).bind("click", handleClickRemoveTrapezoidBtn);
  $(saveTrapezoidBtn).bind("click", handleClickSaveTrapezoidBtn);
}