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

方法链接对JQuery中动态创建的元素不起作用

1 个答案: