当javascript在元素上调用提交时，jQuery覆盖表单提交不起作用

Posted 2023-05-08

【中文标题】当javascript在元素上调用提交时，jQuery覆盖表单提交不起作用

【英文标题】：jQuery override form submit not working when submit called by javascript on a element

【发布时间】：2010-09-13 14:36:48

【问题描述】：

我有一个带有提交按钮的普通表单的页面和一些绑定到表单提交事件并用e.preventDefault() 覆盖它并运行 AJAX 命令的 jQuery。这在单击提交按钮时工作正常，但是当单击带有onclick='document.formName.submit();' 的链接时，AJAX 表单提交事件处理程序不会捕获该事件。任何想法为什么不或如何在不绑定所有 a 元素的情况下使其工作？

【参考方案1】：

几个建议：

重写提交函数来做坏事

    var oldSubmit = form.submit;
    form.submit = function() 
        $(form).trigger("submit");
        oldSubmit.call(form, arguments);
    

为什么不绑定到所有的 标签？那么你就不需要做任何猴子补丁了，它可以很简单（假设所有链接都在表单标签内）：

    $("form a").click(function() 
        $(this).parents().filter("form").trigger("submit");
    );

【讨论】：

第一个例子中的'form'代表什么？

@tishma 表单 DOM 元素，如本例所示：***.com/a/931482/1048862

这在一些较旧的浏览器中不起作用。 JS .submit 属性是原因。使用 $().submit(function() ...);而是。

【参考方案2】：

如果您使用 jQuery，您应该通过它自己的 event mechanism 附加事件，而不是使用“on”属性（onclick 等）。它还有自己的事件触发方法，恰当地命名为'trigger'，您应该使用它来激活表单提交事件。

【讨论】：

我同意 - 不要在你的代码中使用突兀的 javascript，如果你将不突兀的 JavaScript 与它混合使用它只会让人头疼。

【参考方案3】：

谢谢伊兰

我正在使用这个事件绑定代码

this._form.bind('submit', Delegate.create(this, function(e) 
    e.preventDefault();
    this._searchFadeOut();
    this.__onFormSubmit.invoke(this, new ZD.Core.GenericEventArgs(this._dateField.attr('value')));
);

但 html 上有旧版 onclick 代码，我不想更改它，因为链接太多。

【讨论】：

问题是调用表单的submit()方法不会激活事件。输入 focus() 方法也是如此——它们根本不经过常规的事件委托链。

【参考方案4】：

这对我有用：

制作一个虚拟按钮，隐藏真正的提交，名称为submit，

然后：

$("#mySubmit").click(function()
    $("#submit").trigger("click"); );

在你的假人上设置一个事件处理程序来触发点击表单提交按钮。让浏览器弄清楚如何提交表单...这样你就不需要在提交表单时preventDefault，这是麻烦的开始。

这似乎解决了这个问题。