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

回答

相關問題