方法链接不适用于 JQuery 中动态创建的元素

Question

我在 table 行中有 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);
      });
    }
  });

方法链接不适用于 JQuery 中动态创建的元素

Method Chaining Won't Work for the dynamically created element in JQuery

javascript

jquery

method-chaining