无效事件侦听器上的 html5 验证未触发

Question

我的 html 中有一个带有以下标记的表单

<form>
    <input type="text" name="fname" required>
    <input type="submit" value="Submit">
</form>

我还有 2 个脚本标签，一个用于 jquery，另一个用于我的 javascript，我称之为 validate.js

<script src="jquery-2.1.4.min.js"></script>
<script src="validate.js"></script></body>

当我将以下代码放入我的 validate.js 文件并提交无效数据时。页面按预期提示“无效”。

$("form input").on("invalid", function() {
     alert("invalid");
});

当我在 validate.js 中使用此代码时，当我点击输入时，页面再次按预期运行，这次会提示“点击”。

$("body").on("click", "form input", function(){alert("click");});

但是下面的代码不起作用。当提交无效数据时，无效事件处理程序不会触发，并且不会像应有的那样提醒“无效”。

$("body").on("invalid", "form input", function(){alert("invalid");});

我想这样做是因为在我的应用程序中，我从一个 ajax 请求向我的页面添加了一个表单，因此我想将事件处理程序附加到正文而不是表单本身。有什么理由不工作吗？

Answer 1

$("body").on("invalid", "form input", function(){alert("invalid");}); 这可能不起作用，因为这是一个实时事件，其中事件附加到正文并触发无效的正文而不是表单输入。

$("body").on("click", "form input", function(){alert("invalid");}); 例如，如果我们将其更改为单击，则事件会侦听主体单击，然后将事件传播到表单输入。

尝试使用直接选择器。