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

Question

好的，我有一个表单，它有几组字段，例如 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 来解决这个问题，但是，我觉得这是一个黑客而不是解决方案。有人帮忙吗？

Answer 1

我认为问题在于默认情况下(在 IE 以外的浏览器中)type按钮的值为submit - 对于您的用例，您希望它是 button 。添加属性type="button" ，应该修复它。

这是一个working example显示[缺乏] type 的效果<button> 的属性s。您必须在浏览器的开发工具(FF 中的 Firebug、Chrome 中的开发人员工具)中查看网络事件