Question

我正在尝试编写一个表单，当单击表单上的按钮时，该表单会向服务器发送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。

为什么？

Answer 1

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

在这种情况下，绑定到表单提交可能更好，以防止其他方式提交表格，这会使按钮点击。“

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

        return false;
    });
});

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

另请注意，return false;等同于event.preventDefault();和event.stopPropagation();。

Answer 2

您需要使用preventDefault代替stopPropagation。

Here is an example

Answer 3

使用e.preventDefault（）来停止按钮正常行为

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

    //do ajax


    });
});

jQuery停止事件传播 - 不止一次

3 个答案: