1

我正在尝试编写一个表单，当单击表单上的按钮时向服务器发送 JSON 请求。我想禁用默认表单行为，以便单击按钮完成发送电子邮件地址的工作。这个想法是从服务器向表单返回一条消息（如果出现错误），或者用成功消息替换表单（成功时）。

这是我到目前为止所拥有的（片段）：

<div>
    <br />
    <div class="row">
        <div id="invite-member">
            <p>Enter your email:</p>
            <div class="no-show error-msg"></div>
            <form id="frm-invite" method="post" autocomplete="off" action='www.example.com/backend.php' accept-charset="UTF-8">
                <div class="input-append">
                    <input type="text" placeholder="Enter Email" class="input-long">
                    <button id="btn-invite" class="btn btn-primary btn-success" type="submit">Add me »</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#btn-invite").click(function(e){
        alert('Woohoo');
        e.stopPropagation();
    });
});
</script>

第一次加载页面时，按钮的行为与预期相同。尽管随后的时间（没有重新加载页面），事件绑定似乎已被“破坏”并且浏览器想要转到 www.example.com/backend.php。

这是为什么？。

4

3 回答 3

1

我正在尝试编写一个表单，当单击表单上的按钮时向服务器发送 JSON 请求

在这种情况下，绑定到表单提交可能会更好地防止其他提交表单的方式，这些方式会影响按钮单击。

$(document).ready(function(){
    $("form").on("submit", function(e){
        $.ajax({
         // do you thing...
        });

        return false;
    });
});

on()仅在 jQuery 1.7 及更高版本中可用，如果您使用低于 1.7 的 jQuery 版本，请将其替换为bind()

还要注意return false;等于event.preventDefault();和event.stopPropagation();。

于 2012-11-28T17:19:00.883 回答
0

您需要使用preventDefault而不是stopPropagation.

这是一个例子。

于 2012-11-28T17:11:32.530 回答
0

使用 e.preventDefault() 停止按钮的正常行为

$(document).ready(function(){
    $("#btn-invite").click(function(e){
    e.preventDefault();        

    //do ajax


    });
});
于 2012-11-28T17:12:13.180 回答