обновить контент на jquery mobile page load

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