Question

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Assignment1</title>
<!--<script type="text/javascript" src="jquery.js"></script>-->
       <link rel="stylesheet" href= "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
       <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
       <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "Assignment1.xml",
            dataType: "xml",
            async: true,
            success:parseXML,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status + " " + textStatus + ": " + errorThrown);
                }
        });
    });


    function parseXML(xml,textStatus,XMLHttpRequest) {

        // main page 
        $("#mainHead").append($(xml).find('BookSite').text());
        $("#mainFooter").html("<p>Name: " + $(xml).find('name').first().text() + "</p>");
        $("#mainFooter").append("<p>Program: " + $(xml).find('name').attr('program') + "</p>");
        $("#mainFooter").append("<p>StudentNum: " + $(xml).find('name').attr('studentNum') + "</p>");


    }


    $(document).on("pageshow","#p2", function() {
        $("page2").append("<p>asdf</p>");
        console.log("pageshow event fired");
    });


    $("page2").on( "pageload", function( event ) {
        $("page2").append("<p>asdf</p>");
    })

    function pageLoad() {
        $("page2").append("<p>asdf</p>");
    }

    $(document).on("pageinit",function(event,data) {
        $("page2").append("<p>asdf</p>");
    });
    $(document).on("pageload",function(event,data) {
        $("page2").append("<p>asdf</p>");
    });



</script>
</head>
<body>
    <!--current page-->
    <div data-role="page" id="homePage" data-title="p1">
        <div data-role="header">
        <h1 id="mainHead"> </h1>
        </div>
        <div role="main" class="ui-content" >
            <div class='ui-grid-a'>
              <div class='ui-block-a' id='_out' align="center">
                <a id='goP2' href="#p2">Book1</a><br><br>
              </div>
              <div class='ui-block-b' id='_out' align="center">
                <a id='goP3' href="#p3">Book2</a><br><br>
              </div>
            </div>
        </div>
        <div role="main" class="ui-content" >
            <div class='ui-grid-a'>
              <div class='ui-block-a' id='_out' align="center">
                <a id='goP4' href="#p4">Book3</a><br><br>
              </div>
               <div class='ui-block-b' id='_out' align="center">
                <a id='goP5' href="#p5">Book4</a><br><br>
              </div>
            </div>
        </div>

        <!-- navbar -->
        <div data-role="navbar">
            <ul>
                <li><a href="#p2">Book1</a></li>
                <li><a href="#p3">Book2</a></li>
                <li><a href="#p4">Book3</a></li>
                <li><a href="#p5">Book4</a></li>
                <li><a href="#homePage">HOME</a></li>
            </ul>
        </div>

        <div data-role="footer">
            <h1 id="mainFooter"></h1>
        </div>
    </div> 

    <!--page 2-->
    <div data-role="page" id="p2" data-title="p2" >
      <div data-role="header">
        <h1>Page Two</h1>
      </div>

      <div role="main" class="ui-content">
        <p id="page2">This is page2</p><br>
      </div>

      <div data-role="footer">
        <h1>Footer</h1>
        <a href="#" data-rel="back">back</a>
      </div>
    </div> 
</body>
</html>

我想在页面2的div内附加一个html文本，但是$（document）.on（“ pageshow”，“＃p2”，function（））下的所有功能都没有附加html文本'asdf '。我意识到研究后，document.ready仅适用于主页，但是我想保留主页，我将如何解决这个问题？

jQueryMobile，在新页面div内附加html

0 个答案: