阻止IE表单提交jQuery委托“提交”操作

我试图使用jQuery的.delegate（）函数来捕获提交按钮按下并阻止页面被重新加载。阻止IE表单提交jQuery委托“提交”操作

它可以在我尝试过的每个浏览器中都正常工作，但是可以使用Internet Explorer！！

让我的代码解释，我有这样的HTML是通过JS动态生成：

<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上的输入按钮相同？

来源

2010-10-01 Stephen RC

如果不使用'.delegate（）'，会发生什么？老实说，你有一个独特的，一次性的表格，你可能不需要使用事件代表团。 – jason 2010-10-01 01:24:10

不，它是由JS生成的，因为新的表单是在用户输入上创建的。根据用户的不同，可以在1到100之间创建这些内容。 – 2010-10-02 21:57:30

我想通了。

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

所以：

按“确认”键，在输入框中触发表单提交动作
点击“提交”按钮，触发按钮单击操作

这并不意味着代码重复，但它现在在IE和其他工作。

来源

2010-10-02 22:03:03

你救了我的一天，先生！ – glebm 2011-09-14 14:06:17

这个错误在jQuery 1.6.4中得到解决（http://bugs.jquery.com/ticket/10208）！ – glebm 2011-09-14 14:15:09

您是否知道可以进一步避免代码重复？。'$（ '形式'）提交（handlerFn）; $（ 'input.submit'）点击（handlerFn）。函数handlerFn（）{/ * do stuff * /'。将你的处理程序分成一个命名函数，然后你可以将这个函数对象传递给这两个处理程序。 – jmort253 2012-06-01 17:07:11

试试这个，

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

来源

2010-10-01 00:22:36

是的，这将阻止表单提交。这里有一个小问题，这里有点逻辑...... – 2010-10-01 00:23:18

防止JS执行...... – 2010-10-01 01:07:21

如果你使用jQuery，你应该将你的行为与HTML结构分开。在文档就绪功能中添加一个监听器绑定，而不是在表单中使用onSubmit。 – Aaron 2010-10-01 01:24:44

朗在这里拍摄的，但你有没有与任何一个的submit-form或blahbuttonid或name属性，该属性页什么别的吗？或全局变量（例如，window属性）？因为IE有命名空间问题（它为conflates things it shouldn't），并且不止一次，我发现通过发现具有相同值的name某处存在某种东西，解决了这类古怪问题。

一个简单的方法来检查是暂时给窗体和按钮全新的ID（如flibbergibbet23和ohmygodunicorns451），看看问题是否消失。如果是这样，那么你知道这是一个奇怪的IE名称冲突，你可以去寻找和摧毁任务...

来源

2010-10-01 00:27:06

好的建议:)但是ID的都非常独特。（我已经使用友好的例子） – 2010-10-01 00:56:44

@Valorin：只是要加倍确定你了解我，但不幸的是，IE浏览器会混淆'id'和'name'值（它们混合在一起）*和*属性在'window'对象上。所以它不只是'id's ... – 2010-10-01 08:38:21

我在同一时间设置元素的名称和id属性。问题在于IE在触发JS动作之前触发表单动作，所以JS永远不会运行。（因为我使用.delegate（）） – 2010-10-02 21:58:34

不要event.preventDefault()和event.stopPropagation()为你工作？

或者以下应该工作以及：

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

对于

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

来源

2010-10-01 00:51:49

不，他们不工作。感谢您的建议虽然:) – 2010-10-01 01:06:22

顺便说一句，我只是试过你的代码，它似乎在IE中工作正常 - http://jsbin.com/esezu3 – 2010-10-01 01:17:49

它不适用于我的IE安装，所以也许还有别的东西继续。 – 2010-10-02 21:59:55

一个可以考虑的是使用按钮，而不是提交作为类型属性。

<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"); 
    }); 
});

然后，它不会提交表单作为其默认的行为，您可以根据需要附加一个点击收听，等它，并具有监听器函数提交表单，而不是只要你指定的任何条件（如果有的话）。

这样你就不必使用我认为的东西了，有点黑客可以取消（使用e.preventDefault（），返回false，无论什么......）表单提交操作没有首先必须解雇。取消默认行为有时会导致怪异和难以追查的副作用...所以为什么不避免首先做（如果你能够，当然）？

来源

2010-10-01 01:14:37 Aaron

按钮不会在输入窗体中按下'enter'按钮时触发。 – 2010-10-02 22:00:29

+1 - 我使用这种技术，可能会再次使用它。您只需将一个按键事件绑定到输入字段，以便输入按键调用按钮的点击处理程序。好处是你可以通过编写单击处理程序代码并省略提交处理程序来避免代码重复。 – jmort253 2012-06-01 16:58:29

阻止IE表单提交jQuery委托“提交”操作

回答

相关问题