在jquery移动页面加载时刷新内容

Question

我有一个列表视图，当在列表视图上单击每个项目时，（将其添加到本地存储中），将打开一个对话框（页面），显示单击的项目的更多信息（详细视图）。 我为对话框页面添加了标记，同时执行的操作是，当我单击一个项目时，它在对话框页面上显示了所单击项目的正确详细信息，但是当对话框页面关闭并单击另一个时，项目，它将其添加到对话框页面上的先前项目中。 单击关闭按钮并返回到下一个项目后，我想刷新对话框页面。

这是新对话框页面的href位置：

markup += '<li><a href="#fbfullpostviewpage" class="item" data-rel="dialog" data-transition="pop" data-overlay-theme="e" data-inline="true"><img src="' + thumb_url + '">' +'<h4>' + name + '</h4><p>' +'posted this photo....</p><p>'+likes+'<img src="images/facebook-like-16.png"></p></a></li>';

这是对话框页面：

<div data-role="page" id="fbfullpostviewpage">
  <script src="facebook_feed.js"></script>
  <script type="text/javascript">

          $( '#fbfullpostviewpage' ).on( 'pageinit', function( event ) {
           if (Modernizr.localstorage) {
             //retrievPostFromLocalStorage();              
             // $('#actorDisplay').remove();




            }
            else {
                $('#message').text("Sorry your browser doesn't support local storage");
                $('#message').show();
            }
    });



  </script>
    <div data-role="header" id="fbheader" data-theme="b" data-inline="true"><div class="logo"><img src="images/facebook_64x64.png"></div>
        <h1 id="headername"style="position:relative; top:-10px;">

        </h1>
    </div><!-- /header -->
    <div id="fb-root"></div>
    <div data-role="content" data-theme="d">
      <p id="message"/>
      <div id ="actorDisplay"></div>
      <div id ="detailedpost"></div>


    </div><!-- /content -->
    <div data-role="footer" data-theme="b">
        <h5>
            CS408
        </h5>
    </div><!-- /footer -->
</div>

这是我做追加的方法

 function showDetailedPost(ItemtoDisplay){


    var actorID = ItemtoDisplay.actor_id;
    var actor_name;
    var actor_markup ='';



      FB.api('/'+actorID+'', function(response) {
       // console.log(response);
                  actor_name = response.name; 
                    $('#fbheader #headername').text(actor_name);




   if ((ItemtoDisplay.attachment.media != undefined) && (ItemtoDisplay.attachment.media[0].type == "photo")) {

     actor_markup += '<img src="https://graph.facebook.com/' + actorID + '/picture">'+'  ' + actor_name + ' posted this photo ';

   var thumb_url = ItemtoDisplay.attachment.media[0].src;
   var full_url = thumb_url.replace(/(\/[^/]*)s\.jpg$/, '/s720x720$1n.jpg');

}


 $('#actorDisplay').append(actor_markup);

    });
//$('#actorDisplay').remove(actor_markup);


  }

我已经尝试过.trigger（'create'）; 但是也许我没有把它放在正确的地方。 请帮忙

Answer 1

附加标记之前，请清除容器。

$('#actorDisplay').empty().append(actor_markup);