为什么jQuery“切换”按钮会触发表单上的提交按钮？答案

【问题标题】：Why does jQuery "toggle" button trigger the Submit button on a form?为什么jQuery“切换”按钮会触发表单上的提交按钮？
【发布时间】：2010-09-20 06:45:15
【问题描述】：

我已经构建了一个相当复杂的表单，其中包含一个隐藏部分，用户可以在必要时打开该部分以输入更多信息。但是，当您单击标记为 I have more Nativities 的切换按钮时，它会触发提交按钮并提前提交表单。

该表单目前在开发中，但可以在 here 找到。

我用于切换按钮的代码是：

<script type="text/javascript">
    $(function() {
        $("#schedule").accordion({ header: "h5", collapsible: true });
        $("#more-nativities").hide();
        $("#toggle").click(function()   {
            $("#more-nativities").slideToggle("slow");
        });
    });
    </script>

提交按钮的代码非常基本：

<input id="submit2" type="image" src="_images/btn_register.jpg" name="submit"  alt="" onmouseover="javascript:this.src='_images/btn_register2.jpg'" onmouseout="javascript:this.src='_images/btn_register.jpg'"/>

切换按钮的代码是：

<button id="toggle">I have more nativities</button>

关于为什么切换按钮触发提交的任何想法？更重要的是如何解决问题？

谢谢！

【问题讨论】：

顺便说一句，我建议不要使用inline JS. Write unobtrusive Javascript。
提供尽可能多的相关代码非常有帮助。我在您的原始代码中编辑了切换按钮。

标签： javascript jquery

【解决方案1】：

尝试添加类型，即：

<button type="button" id="#toggle">Text</button>

http://www.w3schools.com/tags/tag_button.asp 表示应该始终定义它。浏览器可能默认为提交按钮。

【讨论】：

我不知道你看到了什么，但按钮没有类型。
在我的浏览器上看不到它。我所拥有的只是：
@SimpleCoder - 我没有意识到这是被引用的代码......我认为这是关于<input> 按钮。 <button> 标签的代码未包含在 OP 中。我已将其编辑到问题中。

【解决方案2】：

Esteban 有一个解决方案。 jQuery tutorial 中描述了一个更好的：

 $(document).ready(function(){
   $("a").click(function(event){
     alert("As you can see, the link no longer took you to jquery.com");
     event.preventDefault();
   });
 });

【讨论】：

【解决方案3】：

试试

 return false;

在切换按钮的点击功能上滑动切换后。

【讨论】：

【解决方案4】：

来自 W3Schools：

始终指定类型属性按钮。默认类型为 Internet Explorer 是“按钮”，而在其他浏览器中（以及在 W3C 规范）它是“提交”。

http://www.w3schools.com/tags/tag_button.asp

一定要指定type="button"

【讨论】：