防止在 jQuery 委托“提交”操作上提交 IE 表单

Question

我正在尝试使用 jQuery 的 .delegate() 函数来捕捉提交按钮的按下并防止页面被重新加载。

它在我尝试过的所有浏览器中都能正常工作，但 Internet Explorer！

让我用代码解释一下，我有这个由 JS 动态生成的 HTML：

<form id='submit-form'>
  <input type='text' id='blah' />
  <input type='submit' id='blahbutton' />
</form>

我的 Javascript 看起来像这样：

$("body").delegate("#submit-form", "submit", function(event)
{
  // to logic here
  return false;
});

当在文本框中输入并使用“Enter”键盘按钮时，它会很好地执行 JS 并且页面保持原样。但是当用鼠标点击提交按钮时，它会重新加载页面并提交表单。

我怎样才能使单击按钮与在 Internet Explorer 上的输入中按 Enter 相同？

Answer 1

我想通了。

我的解决方案是为both表单提交和提交按钮点击创建操作。

所以：

• 在输入框中按“Enter”触发表单提交操作
• 点击“提交”按钮触发按钮点击操作

这确实意味着代码重复，但它现在可以在 IE 和其他环境中使用。

Answer 2

您可能会考虑使用 button 而不是 submit 作为您的 type 属性。

<button type="submit"></button>

是一样的

<input type="submit"></button>

但是如果你使用

<button type="button"></button> 

或

<input type="button"></button>

然后使用类似的东西：

$(function() {
    $("#buttonId").bind("click", function() {

        // ...do stuff

        //if all conditions are met

        $("formId").trigger("submit");
    });
});

然后它不会将表单作为其默认操作提交，您可以根据需要将 click listener 等附加到它，并让该侦听器函数在任何条件下提交表单你指定（如果有的话）得到满足。

这样你就不必使用我认为的东西，取消（使用 e.preventDefault()，返回 false，无论如何......）一个没有的表单提交操作首先要被解雇。取消默认行为有时会导致奇怪且难以追踪的副作用......所以为什么不首先避免必须这样做（当然，如果你可以的话）？

Answer 3

这里是长镜头，但是您在该页面上是否还有 任何内容，其 id 或 name 属性为 submit-form 或 blahbutton？还是一个全局变量（例如，window 属性）？因为 IE 存在命名空间问题（conflates things it shouldn't），而且我不止一次看到这种奇怪的问题通过发现某处具有相同值的 name 来解决。

一种简单的检查方法是暂时为表单和按钮提供全新的 ID（如 flibbergibbet23 和 ohmygodunicorns451），然后查看问题是否消失。如果是这样，那么您知道这是一个奇怪的 IE 名称冲突，您可以执行搜索和销毁任务...

Answer 4

试试这个，

<form id='submit-form' onSubmit='return false;'>

Answer 5

event.preventDefault() 和 event.stopPropagation() 不适合你吗？

或者以下也应该起作用：

    function myFunction()
    {
        if(...)
        {
           return true;
        }
        return false;
    }

对于

<form id="formId" action="#" onsubmit="return(myFunction())">
...
   <input type="submit" value="submit" />
</form>