Question

我有一份简报注册表格，我正在兴奋起来。我在下面有这个jQuery脚本：

$(document).ready(function(){  
$('#newsletter-signup').submit(function(){  

    //setup variables  
    var form = $(this),  
    formData = form.serialize(),  
    formUrl = form.attr('action'),  
    formMethod = form.attr('method'),   
    responseMsg = $('#signup-response');  

    //show response message - waiting  
    responseMsg.hide()  
               .addClass('response-waiting')  
               .text('Please Wait...')  
               .fadeIn(200);  

    //send data to server for validation  
    $.ajax({  
        url: formUrl,  
        type: formMethod,  
        data: formData,  
        success:function(data){  

            //setup variables  
            var responseData = jQuery.parseJSON(data),   
                klass = '';  

            //response conditional  
            switch(responseData.status){  
                case 'error':  
                    klass = 'response-error';  
                break;  
                case 'success':  
                    klass = 'response-success';  
                break;    
            }  

            //show reponse message  
            responseMsg.fadeOut(200,function(){  
                $(this).removeClass('response-waiting')  
                       .addClass(klass)  
                       .text(responseData.message)  
                       .fadeIn(200,function(){  
                           //set timeout to hide response message  
                           setTimeout(function(){  
                               responseMsg.fadeOut(200,function(){  
                                   $(this).removeClass(klass);  
                               });  
                           },3000);  
                        });  
             });  
          }  
    });  

    //prevent form from submitting  
    return false;  
});  
});

如果您有兴趣，这里是我的PHP片段（删除了DB凭据）：

<?php 
if(isset($_GET['action'])&& $_GET['action'] == "signup"){  
mysql_connect(***REMOVEDforprivacy*******);  
mysql_select_db(***REMOVEDforprivacy*******);  

//sanitize data  
$email = mysql_real_escape_string($_POST['signup-email']);  

$to ='***REMOVEDforprivacy*******';
$subject = '***REMOVEDforprivacy*******';
$body = "The email address ". $email. " has been added to the email database.";
$headers = 'From: ***REMOVEDforprivacy*******' . "\r\n" .
            'Reply-To:  ***REMOVEDforprivacy*******' . "\r\n" .
            'X-Mailer:  PHP/' . phpversion();

//validate email address - check if input was empty  
if(empty($email)){  
    $status = "error";  
    $message = "You did not enter an email address!";  
}  
else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){ //validate email address - check if is a valid email address  
    $status = "error";  
    $message = "You have entered an invalid email address!";  
}  
else {  
   $existingSignup = mysql_query("SELECT * FROM signups WHERE email_address='$email'");  
   if(mysql_num_rows($existingSignup) < 1){  



       $insertSignup = mysql_query("INSERT INTO signups (email_address) VALUES ('$email')");  
       if($insertSignup){  
           $status = "success";  
           $message = "You have been signed up!";
            mail($to, $subject, $body, $headers);
       }  
       else {  
           $status = "error";  
           $message = "Oops, There has been a technical error!";  
       }  
    }  
    else {  
        $status = "error";  
        $message = "Looks like you have already registered this email address with us.  Thank you for your support!";  
    }  
}  

//return json response  
$data = array(  
    'status' => $status,  
    'message' => $message  
);  

echo json_encode($data);  

exit;  
}  


?>

一切顺利到此为止：

//show reponse message  
            responseMsg.fadeOut(200,function(){  
                $(this).removeClass('response-waiting')  
                       .addClass(klass)  
                       .text(responseData.message)  
                       .fadeIn(200,function(){  
                           //set timeout to hide response message  
                           setTimeout(function(){  
                               responseMsg.fadeOut(200,function(){  
                                   $(this).removeClass(klass);  
                               });  
                           },3000);  
                        });  
             });

我不知道这里有什么问题。语法似乎没问题，但是，当我尝试删除大部分内容并且仅使用responseMsg.fadeOut(200);时，responseMsg不会淡出（因此您可以忘记删除类并添加新类）。我已经使用Firebug进行了检查，并且POST响应确实显示了正确的错误并且正在返回成功消息...（并且确实检查了我的数据库，条目被添加并且发送了警报电子邮件）......所以一切都在工作，除了花哨的schnazzy JQuery效果。我简单地认为我从页面上的另一个元素发生了JQuery冲突，所以我删除了它，并且没有任何变化。我尝试使用$ .noconflict（），$ .noconflict（true），并用JQuery替换$的所有实例（但是，然后，页面上的其他项目仍然没有冲突）。我尝试删除调用以添加'响应等待'类，并在数据的JSON解析后添加响应消息类，但这不起作用。我几乎从this awesome tutorial复制并粘贴了这个脚本，所以我不知道为什么它不起作用。有人知道吗？

更新

FWIW这里是一个JSFiddle，虽然没有PHP DB的东西它绝对不行......不知道我怎么能解决这个问题，伙计....

更新让它正常工作，将我的PHP代码放在我的html标题之上的愚蠢错误......一旦我被允许就会发布为答案。

Answer 1

我的意思是你应该减少代码来复制你的问题。一般来说，你会发现你的问题。这很好（通过点击触发事件来模拟表单提交）：

http://jsfiddle.net/k8nhR/3/

$(document).ready(function(){  
    $('#signup-button').click(function(){  

        responseMsg = $("#signup-response");
                 //show response message - waiting  
         responseMsg.hide()  
                    .addClass('response-waiting')  
                    .text('Please Wait...')  
                    .fadeIn(200);  

        var responseData =  { status : "success", message: "success message"};
                var klass = '';

                //response conditional  
                switch(responseData.status){  
                    case 'error':  
                        klass = 'response-error';  
                    break;  
                    case 'success':  
                        klass = 'response-success';  
                    break;  
                }  

                //show reponse message  
                responseMsg.fadeOut(200,function(){  
                   $(this).removeClass('response-waiting')  
                          .addClass(klass)  
                          .text(responseData.message)  
                          .fadeIn(200,function(){  
                              //set timeout to hide response message  
                              setTimeout(function(){  
                                  responseMsg.fadeOut(200,function(){  
                                      $(this).removeClass(klass);  

                                  });  
                               },3000)  
                           });  
                });   
      });  
    });

Answer 2

你需要在成功函数之前声明Klass变量，这样它可以通过回调函数检索，而不是使用setTimeout，只需使用.delay（）

fadeOut，removeClass在addClass之后不起作用

2 个答案: