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

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>

Answer 2

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

这是一个working example，显示[{1}} type属性[缺少]的影响。您必须在浏览器的开发工具中看到网络活动（FF中的Firebug，Chrome中的开发人员工具）

Answer 3

您只需要添加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>

Answer 4

我将您的代码添加到jsFiddle（如果您想要更多内容，则会链接），但即使我删除按钮的click事件，提交仍会触发。看起来好像没有正确的提交按钮，HTML选择其中一个按钮。（我找不到spec中按钮特有的这种行为。

正如其他“回答者”现在建议的那样，因为我是一个缓慢的人，你应该使用preventDefault。

您可能会觉得这很有用 - How is the default submit button on an HTML form determined?

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

4 个答案: