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

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 3 年前。

我有 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);
      });
    }
  });