2

次のようにHTMLをdivに追加します。

var parent = $('#loginPage');
console.log(parent);
parent.append('<p> TEST </p>');

正しく追加されます。firebugDOMで表示できますが、実際のページには表示されません。

何がその問題を引き起こす可能性がありますか？

編集：これはhtmlです

!DOCTYPE html>
<%@page import="auth.BasicAuthRedirectServlet"%>
<%@page import="model.User"%>
<%@page import="org.brickred.socialauth.util.Constants"%>
<%@page import="org.apache.shiro.SecurityUtils"%>
<html>
<head>
    <title>Current Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="js/init.js"></script>
    <script type="text/javascript" src="js/handler.js"></script>
    <script type="text/javascript" src="js/errorMsgs.js"></script>
    <script type="text/javascript" src="js/globalHelper.js"></script>
    <script type="text/javascript" src="js/request.js"></script>
</head>
<body>
    <div data-role="page" id="loginPage">
        <div data-theme="a" data-role="header">
            <h3>Login</h3>
        </div>
        <div data-role="content">

            <!-- Display if the user is logged in or not -->
            <h3><%=SecurityUtils.getSubject().isAuthenticated()
                    ? "Username: " + SecurityUtils.getSubject().getPrincipal()
                    : "Currently not logged in"%></h3>

            <h3>Login with existing account:</h3>
            <a data-role="button" data-transition="fade" data-theme="a"
                href="auth?provider=<%=Constants.FACEBOOK%>" data-ajax="false"
                data-icon="arrow-r" data-iconpos="right"> Facebook </a> <a
                data-role="button" data-transition="fade" data-theme="a"
                href="auth?provider=<%=Constants.GOOGLE%>" data-ajax="false"
                data-icon="arrow-r" data-iconpos="right"> Google </a> <a
                data-role="button" data-transition="pop" data-theme="b"
                href="#authcLogin" data-icon="arrow-r" data-iconpos="right"> Use
                custom account </a>
            <div data-role="collapsible-set" data-theme="" data-content-theme="">
                <div data-role="collapsible" data-collapsed="true">
                    <h3>Other account providers</h3>

                        <!-- The following order of the oAuth services is based on usage statistics -->

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.YAHOO%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Yahoo </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.TWITTER%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Twitter </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.LINKEDIN%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Linkedin </a> 

                        <a 
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.OPENID%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> OpenID </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.HOTMAIL%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Hotmail </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.FOURSQUARE%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> FourSquare </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.YAMMER%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Yammer </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.MYSPACE%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> MySpace </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.SALESFORCE%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Salesforce </a>
                </div>
            </div>
            <a data-role="button" data-transition="pop" data-theme="e"  href="#registerPage" data-icon="arrow-r" data-iconpos="right"> Register new account </a>
        </div>
    </div>
    <div data-role="page" id="authcLogin">
        <div data-theme="a" data-role="header">
            <h3>Login</h3>
            <!-- Backbutton -->
            <a data-role="button" data-direction="reverse" data-rel="back" data-transition="pop" data-theme="e" href="loginPage"
                data-icon="arrow-l" data-iconpos="left"> Back </a>
        </div>
        <div data-role="content">
            <form id="logFrm" class="ui-body ui-body-a ui-corner-all">
                <fieldset>
                    <div data-role="fieldcontain">
                        <label for="uIdInput">Email:</label> 
                        <input name="<%=User.USER_ID%>" id="uIdInput" value="" type="email" placeholder="your.mail@abc.com" /> <label for="uPwInput">Password:</label>
                        <input name="<%=BasicAuthRedirectServlet.PASSWORD%>" id="uPwInput" value="" type="password" placeholder="Your password" />
                    </div>
                    <button id="logBtn"data-theme="b">Login</button>
                </fieldset>
            </form>
        </div>
    </div>
    <div data-role="page" id="registerPage">
        <div data-theme="a" data-role="header">
            <h3>Create account</h3>
            <!-- Backbutton -->
            <a data-role="button" data-direction="reverse" data-rel="back" data-transition="pop" data-theme="e" href="loginPage"
                data-icon="arrow-l" data-iconpos="left"> Back </a>
        </div>
        <!-- Registration -->
        <div data-role="content">
            <div data-role="content">
                <form id="regFrm" class="ui-body ui-body-a ui-corner-all">
                    <fieldset>
                        <div data-role="fieldcontain">
                            <label for="rUIdInput">Email:</label>
                            <input name="<%=User.USER_ID%>" id="rUIdInput" value="" type="email" placeholder="your.mail@abc.com" /> 
                            <label for="rUPwInput">Password:</label>
                            <input name="<%=BasicAuthRedirectServlet.PASSWORD%>" id="rUpwInput" value="" type="password" placeholder="Your password" />
                        </div>
                        <button id="regBtn" data-theme="b">Register</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
<script>
    function goBack() {
        window.history.back()
    }
</script>
</body>
</html>
4

3 に答える 3

1

FireBugを使用する場合、その要素のスタイルをトレースせず、なぜそれが非表示であるかを確認する場合、その親の1つが非表示であるか、新しい要素の位置がその親の表示範囲外である可能性があります

于 2012-10-11T22:41:51.473 に答える
1

最終結果のhtmlがFirebugに追加されているのを実際に見た場合、おそらくこれを見えなくしている別の要素があります。これを試して、新しい要素の位置を取得し、ページから外れているかどうかを確認できます。

var parent = $('#loginPage');
console.log(parent);
parent.append('<p id="testp"> TEST </p>');

console.log($('#testp').position());
console.log($('#testp').offset());
于 2012-10-11T22:46:06.150 に答える
0

CSSが必要なようですね。

試す：

#loginpage p {
  position: relative;
  top: 0px;
  left: 0px;
}
于 2012-10-11T22:39:38.150 に答える