jQuery显示和隐藏导致表单提交

如何解决jQuery显示和隐藏导致表单提交

| 好的，所以我有一个表单，它具有几组字段，例如单击一个Facebook帐户设置即可显示。

  <form id=\"test\" action=\"#\" method=\"POST\">
    <ul class=\"items\">
        <li>
            <button class=\"show-content-button\">Show</button>
            <div class=\"form-content ui-helper-hidden\">
                Hello
            </div>
        </li>
        <li>
            <button class=\"show-content-button\">Show</button>
            <div class=\"form-content ui-helper-hidden\">
                Hello
            </div>
        </li>
        <li>
            <button class=\"show-content-button\">Show</button>
            <div class=\"form-content ui-helper-hidden\">
                Hello
            </div>
        </li>
    </ul>
</form>
<script type=\"text/javascript\">
    $(function() {
        $(\"form#test\").submit(function() {
            alert(\"hello i have been submitted\");
        })
        $(\".show-content-button\").click(function() {
            var $button = $(this);
            if ($button.text() === \"Show\") {
                $(\".form-content\",$button.parent()).fadeIn(400);
                $button.html(\"Hide\");
            } else if ($button.text() === \"Hide\") {
                $(\".form-content\",$button.parent()).fadeOut(200);
                $button.html(\"Show\");
            }
        })
    })
</script>

当我单击其中一个节目时，它导致表单被提交...为什么？我可以通过在按钮单击事件上返回false来解决此问题，但是，我认为这是一种破解，而不是解决方案。有人帮忙吗？     

解决方法

        我认为问题在于默认情况下（在IE以外的浏览器中）按钮的ѭ1is是

submit

-对于您的用例，您希望它是

button

。添加属性“ 4”，应该对其进行修复。 这是一个工作示例，显示了[6]缺少[1]属性的影响。您必须在浏览器的开发工具（FF中的Firebug，Chrome中的Developer Tools）中查看网络活动     ,        

event.preventDefault()

应该是您要寻找的：http://api.jquery.com/event.preventDefault/

<script type=\"text/javascript\">
$(function() {
    $(\"form#test\").submit(function() {
        alert(\"hello i have been submitted\");
    })
    $(\".show-content-button\").click(function(event) {
        event.preventDefault();
        var $button = $(this);
        if ($button.text() === \"Show\") {
            $(\".form-content\",$button.parent()).fadeIn(400);
            $button.html(\"Hide\");
        } else if ($button.text() === \"Hide\") {
            $(\".form-content\",$button.parent()).fadeOut(200);
            $button.html(\"Show\");
        }
    })
})
</script>

    ,        您只需要添加

return false;

即可停止表单提交

<script type=\"text/javascript\">
    $(function() {
        $(\"form#test\").submit(function() {
            alert(\"hello i have been submitted\");
        })
        $(\".show-content-button\").click(function() {
            var $button = $(this);
            if ($button.text() === \"Show\") {
                $(\".form-content\",$button.parent()).fadeIn(400);
                $button.html(\"Hide\");
            } else if ($button.text() === \"Hide\") {
                $(\".form-content\",$button.parent()).fadeOut(200);
                $button.html(\"Show\");
            }
    return false;
        })
    })
</script>

    ,        我将您的代码添加到jsFiddle中（如果您想添加更多内容，请链接），但是即使我删除了按钮的click事件，提交仍会触发。看起来好像没有适当的提交按钮，HTML选择了其中一个按钮。 （我找不到规范中特定于按钮的行为）。 由于我是慢速打字机，因此建议使用其他\“ answerers \”，因此应使用preventDefault。 您可能会发现这很有用-如何确定HTML表单上的默认提交按钮？