JQuery：提交时不起作用答案

【问题标题】：JQuery: on submit doesn't workJQuery：提交时不起作用
【发布时间】：2012-06-23 20:39:42
【问题描述】：

我正在尝试捕获所有表单提交事件，从 action 属性获取 url 并使用它使用 AJAX 将表单的内容发送到该地址。所以我需要的只是一个提交事件处理程序。但是我很快就遇到了麻烦，因为它似乎无法在 IE 中工作。

$(document).submit(function(e) {
        alert('clicked');
        e.preventDefault();
    });

这是我用于跨浏览器测试目的的代码。它在 Chrome、Firefox 中完美运行，但在 IE 中却不行。我不允许在文档上设置事件侦听器吗？

【问题讨论】：

标签： jquery

【解决方案1】：

看看 jQuery API：

JavaScript 提交事件不会在 Internet Explorer 中冒泡。但是，从 jQuery 1.4 开始，依赖事件委托和 submit 事件的脚本将在浏览器中一致地工作，这已经规范了事件的行为。 (api.jquery.com/submit)

submit 事件不会在 Internet Explorer 中冒泡，因此document 元素永远不会收到submit 事件的通知。 jQuery 会为您标准化，但前提是您使用事件委托。这并不难做到，事实上，如果代码更复杂，它可能会让你的代码更好：

$(document).on('submit', 'form', function(e) {
    alert('clicked');
    e.preventDefault();
});

这保留了绑定到document 的优势（例如，捕获尚不存在的元素上的事件），同时使其在 IE 中成为可能。请注意，事件处理程序中的this 现在是form 元素，而不是document。

【讨论】：

就我而言，它仍然无法在 IE 中运行。使用 ajax 拉取表单。
@Andrew 你能提供一个简化的、无效的例子吗？
不是真的，但我会尽可能清楚地举一个例子。如果我将它应用于乞讨表格中的礼物，它就可以工作。一旦我开始使用 ajax 拉取表单，事件处理程序就不再工作了。这是一些有效的代码（在拉取表单后注册事件处理程序）： $('.dialogContext').load('/add/addprojectform', function() { $("form").on('submit' , function(e) { alert('clicked'); e.preventDefault(); });
@lonesomeday sn-p 应该可以工作，我使用类似的脚本将事件处理程序绑定到动态加载的 form.someClass 元素。您也可以尝试将其绑定到 body 或包含动态加载表单的 div。
不适用于委托事件。必须将事件直接附加到表单元素本身（文档中确实提到了这一点，但没有解释原因）。在委托处理程序运行时，表单已经从 Chrome 46 发布到服务器，因此没有机会调用 preventDefault。

【解决方案2】：

将侦听器附加到您的表单

$("form").submit(function(e) {
        alert('clicked');
        e.preventDefault();
});

【讨论】：

好吧，我在文档上注册事件的原因是因为我正在使用 ajax 加载表单。所以我必须在每次拉取数据后注册事件，对吧？
是的，你是对的，这是获取操作 URL 的方法 - jsfiddle.net/qSB4V/1
@Andrew：在这种情况下，使用 jQuery on() 绑定应该可以解决问题，因为它在使用适当的覆盖时会附加到未来的元素。
@FrançoisWahl 不，它没有。看看我的回答如何正确地做到这一点。
@FrançoisWahl 这是$(document).on（绑定到文档）和$('form').on（绑定到表单）之间的区别。 on 并不总是使用事件委托，除非你告诉它

【解决方案3】：

怎么样：

$("form").submit(function(e) {
    alert('clicked');
    e.preventDefault();
});

【讨论】：