0

索引.html

<div data-role="page" id="reviewsPage">
    <div data-role="header">
        <h1>Reviews</h1>
        <a href="#" id="mybtn" class="ui-btn-right">TWEET</a>
    </div>

    <script type="text/javascript">
    $(document).on("pageshow", "#reviewsPage", function(event) {
        $("#mybtn").bind("click", function(e) {
            $.mobile.showPageLoadingMsg();
            $.mobile.changePage("my.html", {
                reloadPage: true, changeHash: true
            });
        });
    });
    </script>
</div>

我的.html

<script type="text/javascript">
$(document).bind('pagebeforechange', function(event, data) {
    $.ajax({
        url: " searchresult.php",
        success: function(data) {
            alert(data);
            var markup = "";
            $.each(data, function(i, elem) {
                var $template = $('<div><li><img class="ui-li-icon     profile"><p class="from"></p><p class="tweet"></p></li></div>');
                $template.find(".from").append(elem['a']);
                markup += $template.html();
            });
            $("#tweet-list").append(markup).listview("refresh", true);

            $.mobile.changePage($("#twitterPage"));
        },
        error: function(request, error) { 
            alert(error);
        }
    });
});
</script>
<div data-role="page" id="twitterPage">
    <div data-role="content">
        <ul id="tweet-list" data-role="listview" data-inset="true">
            <li data-role="list-divider">
                <p>Tweetsdd</p>
            </li>
        </ul>
    </div>
</div>

上面的代码用于使用动态数据更改页面。如果我单击链接，my.html则不会填充数据。但是，如果我my.html直接运行该文件，它就可以工作。如果我在同一页面内写两页，它就可以工作。但我需要在单独的页面中运行它。从昨天开始，我一直在寻找这个问题的答案。我是 jquery 的新手。

4

1 回答 1

2

尝试这个

索引.html

<!DOCTYPE HTML>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script language="text/javascript">
  /* VERY IMPORTANT this is before loading jquery.mobile JS */
  $( document ).on( "mobileinit", function() {
   // Make your jQuery Mobile framework configuration changes here!
        $.mobile.allowCrossDomainPages = true;
        $.mobile.ajaxEnabled = false;
        });

     </script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">      </script>
  <script type="text/javascript">
    $(document).on("pagebeforeshow", function(event) {
        $("#mybtn").bind("click", function(e) {
          $.mobile.showPageLoadingMsg();
           $.mobile.changePage("my.html", {
             reloadPage : false,changeHash : true
        });

    });
});

   </script>
 </head>

<body>
<div data-role="page" id="reviewsPage">

  <div data-role="header">
      <h1>Reviews</h1>
       <a href="#" id="mybtn" class="ui-btn-right" data-ajax="false" >TWEET</a>
</div>

</div>

我的.html

   <div data-role="page" id="twitterPage">
     <script type="text/javascript">
         $(document).bind('pageshow', function(event, data){
   alert("shdgs");
     $.ajax({
      url : " searchresult.php",


       success : function(data) {
        alert(data);
        var markup = "";
        $.each(data, function(i, elem) {
            var $template = $('<div><li><img class="ui-li-icon     profile"><p class="from"></p><p class="tweet"></p></li></div>');
            $template.find(".from").append(elem['a']);
            //$template.find(".tweet").append(result.text);
            //$template.find(".profile").attr("src", result.profile_image_url);
            markup += $template.html();

        });
        $("#tweet-list").append(markup).listview("refresh", true);
        // Transition to the Twitter results page.
         $.mobile.changePage($("#twitterPage"));
    },

    error : function(request, error) {
        // This callback function will trigger on unsuccessful action
        alert(error);
    }
   });
  }); 
 </script>
        <div data-role="content">
          <ul id="tweet-list" data-role="listview" data-inset="true">
        <li data-role="list-divider">
        <p>
            Tweetsdd
        </p>
    </li>
</ul>
 </div>
</div>
于 2013-10-18T06:12:05.307 回答