方法链不适用于 JQuery 中动态创建的元素 [重复]

Question

我在一个表格行中有 3 个 input 字段，需要在客户端进行验证，而无需按下 submit 按钮：

<td>
  <input name="clr" type="number" class="form-control" min="27" step="any">
</td>
<td>
  <input name="litre" type="number" class="form-control" min="0.5" step="any">
</td>
<td>
  <input name="fat" type="number" class="form-control" min="3.0" max="7.0" step="any">
</td>

所以我附上了blur 和invalid 事件。我还需要在动态创建的输入字段上附加这两个事件。

以下代码适用于静态输入字段：

$('input[name="clr"], input[name="litre"], input[name="fat"]').on('blur', function(event) {
  event.target.checkValidity();
  $(event.target).removeClass("errorClass");
}).on('invalid', function(event) {
  setTimeout(function() {
    $(event.target).focus().addClass("errorClass");
  }, 50);
});

对于动态创建的元素，我尝试了以下代码：

$(document).on({
    'blur': function(event) {
      event.target.checkValidity();
      $(event.target).removeClass("errorClass");
    },
    'invalid': function(event) {
      setTimeout(function() {
        $(event.target).focus().addClass("errorClass");
      }, 50);
    }
  },
  'input[name="clr"], input[name="litre"], input[name="fat"]'
);

但是这行不通！

谁能给我建议我该如何克服这个问题？

编辑：以下，我是如何创建动态元素的：

let clrTd = '<td><input name="clr" type="number" class="form-control" min="27" step="any"></td>';
let litreTd = '<td><input name="litre" type="number" class="form-control" min="0.5" step="any"></td>';
let fatTd = '<td><input name="fat" type="number" class="form-control" min="3.0" max="7.0" step="any"></td>';

$(document).on('blur', 'input[name="code"]', function () {
    if ($(this).closest("tr").is(":last-child") && $(this).val() != '') {
        var markup = "<tr>" + clrTd + litreTd + fatTd + "</tr> ";
        $("#editableTable tbody").append(markup);
    }
});

Answer 1

它不起作用的原因是您在网页创建的初始阶段将事件处理程序附加到特定元素。特定元素的识别和附加事件处理程序需要在添加元素之后进行。

您可以在这种情况下创建新函数并重用它们：

function handleBlur(event){
  event.target.checkValidity();
  $(event.target).removeClass("errorClass");
}
function handleInvalid(event){
  setTimeout(function() {
    $(event.target).focus().addClass("errorClass");
  }, 50);
}

将这些事件处理程序附加到特定元素的更改：

$('input[name="clr"], input[name="litre"], input[name="fat"]')
.on('blur',function(event) {
  handleBlur(event);
})
.on('invalid', function(event) {
  handleInvalid(event);
});

动态添加内容的末尾

  $(document).on('blur', 'input[name="code"]', function () {
    if ($(this).closest("tr").is(":last-child") && $(this).val() != '') {
      var markup = "<tr>" + clrTd + litreTd + fatTd + "</tr> ";
      $("#editableTable tbody").append(markup);
      $('#editableTable tbody').find('input[name="clr"], input[name="litre"], input[name="fat"]')
      .on('blur',function(event) {
        handleBlur(event);
      })
      .on('invalid', function(event) {
        handleInvalid(event);
      });
    }
  });