JQuery隐藏后未显示的Div

Question

JQuery隐藏后未显示的Div

4

我在的onload事件中将一个div设置为不可见，但是之后无法让它出现。这应该很容易修复，但我似乎无法弄清楚。

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时，能够使该div重新出现。

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

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

- i_me_mine

1

你能验证 hide_buttons() 是否被调用了吗？ - Josh Bedo

2

顺便问一下，为什么不从一开始就在CSS中隐藏div呢？ - Sergio

@josh 是的，它正在工作。 - i_me_mine

2

我同意@sergio的观点，大多数人在页面加载时使用style="display:none;"。否则，您将会看到元素闪现一下，然后隐藏。先加载脚本，渲染DOM，然后执行JavaScript来隐藏元素。 - Josh Bedo

1

感谢大家的帮助。 - i_me_mine

显示剩余3条评论

3个回答

2

您可以将show语句放在window.load中，而不是DOM准备好时执行，这样可以在admin.js加载后执行。

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

正如T.J. Crowder指出的，事件中存在竞态条件，可以通过使用setTimeout来避免。

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

- Adil

问题在于存在竞争条件。浏览器是先触发 onload 还是先触发通过 addEventListener / attachEvent（这是 jQuery 使用的方式）挂钩的处理程序？答案是：这取决于浏览器。因此，我不建议忽略竞争条件。 - T.J. Crowder

感谢@T.J.Crowder指出这种情况，您的答案中是否使用了setTimeout来避免这种情况？ - Adil

@adil：是的，你说得对，虽然我的主要回答是“不要使用 onload 来隐藏 div”。 :-) （改用内联样式或 CSS。）然后 ready 处理程序就可以正常工作了。 - T.J. Crowder

1

我的建议是使用CSS将其隐藏起来，这可能会解决您的问题。使用#aubd {display:none;}，元素在页面加载时就已经被隐藏，避免了有时出现闪烁效果。这样修复它，我认为这是一种更好的编码方式。关于为什么它不起作用，我认为T.J. Crowder已经回答了。

- Sergio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

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);
});

< p> setTimeout 中的非常短的超时值是为了避免与load事件处理程序发生竞态条件。(jQuery通过addEventListener / attachEvent来挂接处理程序。某些浏览器先触发onload处理程序，然后才触发addEventListener / attachEvent处理程序。其他浏览器则相反。) 但是，最好通过不同的方式在第一时间隐藏

，以完全避免这种情况发生。