无效事件侦听器未激活的html5验证

Question

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

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

我还有两个脚本标签，一个用于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");}); 例如，如果我们将其更改为click，则事件将侦听body单击，然后将事件传播到表单输入。

尝试使用直接选择器。