如何在输入id等于'submit'的情况下提交javascript

Question

我已经将提交事件绑定到表单,并确保它们不会破坏表单,使用这样的jQuery:

jQuery('form').submit(function(e){
    var form = this;
    e.preventDefault(); 
    alert('1');
    setTimeout(function() {   
        alert('2');
        form.submit();
        }, 1000);

    });

这一切都很好,但是,如果由于某种原因,前端开发人员给这个表单的子输入id ="submit",这会form.submit()导致JavaScript错误(在Chrome中,'Uncaught TypeError:Property'提交'对象#不是一个函数').

你可以看到这里发生的一个例子:http://jsfiddle.net/q68ky/(如果没有,这是行为<input id="submit">:http://jsfiddle.net/JpXzL/

现在,我知道我可以阻止它绑定具有id为'submit'的子节点jQuery('form').not(:has('#submit')).submit()的表单,并且表单将处理得很好,但我的绑定永远不会触发这些表单.

所以,问题是:我如何安全地将这个jQuery函数绑定到所有表单,包括那些<input id="submit">？

编辑:值得注意的是,如果我取消绑定提交处理程序然后触发jQuery提交,这个问题不会消失jQuery(form).

Answer 1

我能想到的唯一方法：

(function () {
    var method;

    window.submit = function (theForm) {
        if (!method) {
            method = document.createElement("form").submit;
        }

        method.call(theForm);
    };
}());

然后打电话submit(theFormYouWantToSubmit)。

您可以在这里看到它的实际效果：http ://jsfiddle.net/q68ky/2/

编辑：提供一些关于其作用的解释......

此方法创建一个新的表单元素 ( document.createElement("form"))，并存储对其“提交”属性的引用 ( method = document.createElement("form").submit)。因为这是一个新创建的表单元素，没有子节点，所以我们可以保证“submit”属性实际上是我们需要的“submit”方法，而不是id/name为“submit”的子节点。

然后，我们使用该call方法（ 的一部分Function.prototype），该方法将方法的上下文设置submit为我们要提交的表单，而不是window对象，否则它将位于该对象上。

代码片段中的其余 gubbin 会缓存该submit方法，以便每次您想要提交表单时都不会发生所有这些（尽管很小）开销，并在本地范围内捕获缓存的方法，而不是将其保存在全局范围并污染全局名称空间。