为什么我的div在Ajax调用之后不会显示出来？

新手到Ajax / jQuery。 到目前为止我尝试过的一切都失败了。 我有一个动态标题，用于在登录时显示链接，如果没有登录。

使用简单的php if else来显示链接。

登录下拉，提交提交的jQuery / Ajax函数。 一旦成功，我希望LoggedOut隐藏它的function。 但是LoggedIn拒绝展示自己。

我不能在css中使用display：none，因为此标题和链接应始终存在。

请帮助我，所以我可以停止皱眉和抓头:)非常感谢。

success: function(data) { $("#statusLogin").hide(); if(data.success == true){ $('#loggedIn').show(); //GAAAAAAAAAAAH!!!!! $('#loginContent').slideToggle(); $('#loggedOut').hide(); }else{ // alert("data.message... " + data.message);//undefined $("#error").show().html(data.message); } }, 

编辑：批量的HTML

  loggedIn()){ ?> 
 
 
 <a href="https://stackoverflow.com/questions/17771396/why-wont-my-div-reveal-itself-after-ajax-call/userProfile.php?username=">Profile 
 
 Log out  
 
 
  
 
 
 Login 
 
 
 
 Username: <input type="text" id="username" name="username" autocomplete="off" class="required" value="" /> 
 
 Password:  
 
      
 
 
 
 
 
 Register 
 
 
  

Answer 1

我怀疑这是问题所在：

 loggedIn()){ ?> 
 

最初发送页面时用户未登录，因此DOM中没有loggedIn元素。 当您通过AJAX登录时，这不会改变DOM中的内容。 所以没有什么可以展示的。

你应该无条件地发送这个HTML，只需使用CSS和JS来隐藏和显示它。

要将初始状态转换为jQuery，您可以这样做：

 $(function() { var loggedIn = loggedIn()); ?>; $("#loggedIn").toggle(loggedIn); $("#loggedOut").toggle(!loggedIn); }); 

另一种方法是这样的：

 
loggedIn()) echo 'style="display: none;"'; ?> > ... 
loggedIn()) echo 'style="display: none;"'; ?> > 

Answer 2

问题是您的初始页面加载不包括loggedIn元素。 你有服务器端代码：

  loggedIn()){ ?> 

……首先不发送这些字段。 然后你使用Ajax调用来进行登录，并且不会将任何新内容加载到页面中，因此你的jQuery $('#loggedIn')找不到该元素，因为它不存在。 （您可以通过单击浏览器的“查看页面源”选项（或等效选项）来确认 – 您将看不到该元素。

您可以通过预先发送所有HTML然后根据需要显示或隐藏它来修复此问题，并将用户名设置为通过jQuery / JS显示，或者通过更改Ajax以返回记录后显示的相关HTML在。