Div在隐藏后不会显示JQuery

我似乎无法在正文中将onload隐藏后显示div。这应该很容易解决，我似乎无法弄清楚。Div在隐藏后不会显示JQuery

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<?php include '/include/init.php'; ?> 
<script type="text/javascript" src="/js/jqeury.js"> </script> 
<script type="text/javascript" src="/js/accounts.js"> </script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="/css/style.css" /> 
<title>Accounts</title> 
</head> 

<body onload="hide_buttons()"> 
    <div class="accounts_headerDiv"> 
     <div class="ahd_left"> 
      <img src="/images/launcher2.png" class="accounts_logo"/> 
      <p class="title_para"> Accounts </p> 
     </div> 
     <div class="ahd_right"> 
      <div class="searchDiv"> 
       <p class="searchPara"> Search </p> 
       <input type="text" id="search_input" placeholder="search" class="search_input"/> 
       <img src="/images/search_icon.png" class="search_icon"/> 
      </div> 
      <div class="userDiv"> 
       <a href="#"><img src="/images/default-portrait-icon.jpg" align="right" class="user_picture" /> </a>    
       <p class="userInfo"><?php username($db);?></p> 
       <a href="/functions/logout.php"> Log out </a>            
      </div> 
      <div class="adminUserButtonsDiv" id="aubd"> 
       <input id="createUser" name="createUser" value="Create" type="button" class="admin_button"> 
       <br /> 
       <input id="editUser" name="editUser" value="Edit" type="button" class="admin_button"> 
      </div> 
     </div> 
    </div>  
    <hr /> 
<?php if (is_admin($db) === 'true') { ?>  
    <script type="text/javascript" src="/js/admin.js"> </script> 
<?php } ?> 
</body> 
</html>

的hide_buttons()功能在这里accounts.js

function hide_buttons() { 
    $('#aubd').hide();  
}

然后我要让股利再出现当我打电话持有此功能admin.js

$(document).ready(function() { 
    $('#aubd').show(); 
});

总体目标她e是检查用户是否具有“管理员”角色，并根据此检查隐藏或显示包含的div和按钮。那么我做错了什么？也是这是正确的方式，或者我应该使用AJAX这个？

来源

2013-07-20 i_me_mine

你能证实hide_buttons（）实际上被调用吗？ –

顺便说一句，为什么不从一开始就隐藏在CSS中的div？ – Sergio

@josh是的，它的工作 –

onload事件发生很在页面加载周期后期。 jQuery的ready回调发生得更早（通常）。所以发生什么事是你的show电话正在你的hide呼叫之前发生。

最好的解决办法是不要使用onload。相反，只输出DIV隐藏：

<div id="aubd" style="display: none">....

或者在你的CSS：

#aubd { 
    display: none; 
}

然后你ready处理程序将显示它就好了。

如果你不能改变onload，你可以改变admin.js所以它调用show后：

$(window).load(function() { 
    setTimeout(function() { 
     $('#aubd').show(); 
    }, 0); 
});

的setTimeout与非常，非常短的超时值是有，以避免竞争条件与load事件处理程序。（jQuery通过addEventListener/attachEvent连接处理程序，有些浏览器首先触发onload处理程序，然后处理程序，其他处理程序则以相反的方式执行）。但是，最好通过隐藏div来完全避免这种情况首先。

来源

2013-07-20 16:32:17

哦哇，我不知道。那么最新的解决方案是什么？ –

为什么不是（function（）{（'＃aubd'）。show（）; }）（）或直接$（'＃aubd'）。 – bugwheels94

@Ankit：当页面解析期间达到'admin.js'脚本时，会立即调用它，甚至比jQuery'ready'回调函数早，所以它会有同样的问题jQuery'ready'回调函数具有。 –

，使其admin.js后载入

$(window).load(function() { 
    $('#aubd').show(); 
});

由于T.J. Crowder指出存在的事件竞态条件，可以使用可避免执行你可以把展会声明window.load而不是DOM准备setTimeout的。

$(window).load(function() { 
    setTimeout(function() { 
     $('#aubd').show(); 
    }, 1); 
});

来源

2013-07-20 16:33:17 Adil

问题在于你有一个竞争条件。浏览器是先触发'onload'，还是先触发通过'addEventListener' /'attachEvent'（这是jQuery使用的）钩住的处理程序？答案是：这取决于浏览器。所以我不建议忽略比赛条件。 –

感谢@ T.J.Crowder指出这种情况，setTimeout是为了避免你的答案中的条件？ – Adil

@ adil：是的，没错，尽管我的主要答案是“不要使用'onload'将div隐藏在第一个副本中”。 :-)（使用内联样式或CSS代替。）然后，'ready'处理程序就可以正常工作。 –

我的建议，可能会解决您的问题是让它隐藏在CSS中。

使用#aubd {display:none;}那么元素在页面加载时已经隐藏，避免有时出现并隐藏闪烁。

这解决了它，我认为这是一种更好的编码方式。答案“为什么”它不起作用我认为T.J. Crowder回答。

来源

2013-07-20 16:37:33 Sergio

Div在隐藏后不会显示JQuery

回答

相关问题