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

Posted 2023-02-25

【中文标题】防止在 jQuery 委托“提交”操作上提交 IE 表单

【英文标题】：Prevent IE form submit on jQuery delegate 'submit' action

【发布时间】：2010-10-01 00:18:22

【问题描述】：

我正在尝试使用 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 相同？

【问题讨论】：

如果不使用.delegate()会怎样？老实说，您有一个独特的一次性表单，您可能无论如何都不需要使用事件委托。

不，它是由 JS 生成的，因为新表单是根据用户输入创建的。根据用户的不同，可以创建 1 到 100 个。

【参考方案1】：

我想通了。

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

所以：

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

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

【讨论】：

您知道您可以更进一步并避免代码重复吗？ $('form').submit(handlerFn); $('input.submit').click(handlerFn); function handlerFn() /* do stuff */。将您的处理程序分成一个命名函数，然后您可以将函数对象传递给两个处理程序。

【参考方案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，无论如何......）一个没有的表单提交操作首先要被解雇。取消默认行为有时会导致奇怪且难以追踪的副作用......所以为什么不首先避免必须这样做（当然，如果你可以的话）？

【讨论】：

按钮不会在输入表单中按下“输入”按钮时触发。

+1 - 我使用这种技术并且可能会再次使用它。您只需将按键事件绑定到输入字段，以便输入键调用按钮的单击处理程序。好消息是，您实际上可以通过这种方式避免代码重复，只需为点击处理程序编写代码并省略提交处理程序。

【参考方案3】：

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

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

【讨论】：

好建议 :) 但 id 都非常独特。 （我用了友好的例子）

@Valorin: 只是为了确保你理解我，不幸的是，IE 会混淆 id 和 name 值（它将它们混合在一起）和 window 对象的属性。所以不仅仅是ids...

我同时设置了元素的名称和id属性。问题是 IE 在触发 JS 动作之前触发了表单动作，所以 JS 永远不会运行。 （因为我正在使用 .delegate()）

@Valorin：现在这很有趣……如果您使用的是最新版本 (1.4.2)，这很可能是一个值得 jQuery 人员提出的问题。 （如果不是，1.4.2 对live 和delegate 进行了许多改进，因此可能会在其中修复。）

【参考方案4】：

试试这个，

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

【讨论】：

是的，这将阻止表单提交。 // to logic here 位的小问题...

如果您使用 jQuery，您确实应该将您的行为与您的 HTML 结构分开。不要在表单中使用 onSubmit，而是在文档就绪函数中添加侦听器绑定。

【参考方案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>

【讨论】：

顺便说一句，我刚刚尝试了您的代码，它似乎在 IE 中运行良好 - jsbin.com/esezu3

它不适用于我的 IE 安装，所以可能还有其他问题。