jquery - Ajax 调用 onclick 只发生一次

Question

我的页面中有一个要提交的 from，并且我使用了 ajax 调用：

 $(document).ready(function() {
    $("#password_change").click(function() {                    
        $.ajax({
            type: 'POST',
            url: 'set_password.php',
            data: 'password=' + $('#password').val(),
            success: function(data) {
                var obj = JSON.parse(data);              
                if(obj.success == '1') {    
                    $('#message').show();                            
                }else{
                    $('#fail_message').show();                            
                }
            }
        });
    });
 });

我的表格：

<form id="password_form" name="password_form" action="" method="POST" style="">
    <input type="password"  class="required" id="password" value="" />
</form>

第一次单击提交按钮时，我收到了正确的消息，并且一切似乎都运行良好。然后我再次单击提交按钮第二次，但是我通过 ajax 调用发送的数据是空的，所以我收到了错误的 ajax 调用回复。

有谁知道为什么会发生这种情况？

提前致谢

Answer 1

I think when button click, it also post backed. You stop trigger post back using event.preventDefault() after onclick. try modify code:

...
$("#password_change").click(function(e) {  
   e.preventDefault();
   $.ajax({
     ...
     ...
   });
});
...