title: use photoswipe on dynamically created ul
body: <p>I am working on a jquery mobile site which will have an image gallery populated by JSON/AJAX from instagram. I can get the images loaded just fine, but I want to take it one step further and use photoswipe to render the gallery. The issue that I am running into, is that if I add the call to photoswipe after the <code>ul</code> has been populated from the json feed, the <code>ul</code> has not actually been redrawn, so photoswipe can't find any child elements to use. Below is my script:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div data-role="page" id="Photos"&gt;
  &lt;div data-role="header"&gt;
      &lt;a href="javascript:history.go(-1)" data-icon="back" data-direction="reverse"&gt;Back&lt;/a&gt;      
      &lt;h1&gt;Photos&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;   
      &lt;div id="AdBanner"&gt;
      &lt;/div&gt;
      &lt;ul id="PhotoList"&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>$("#Photos").live("pagebeforeshow", function(){
      $("ul#PhotoList").children().remove('li');
      var tag = MyTag
      $.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&amp;amp;client_id=####",
      function(data){
          $.each(data.data, function(i,item){
              $("ul#PhotoList").append('&lt;li&gt;&lt;a href="' + item.images.low_resolution.url + ' rel="external"&gt;&lt;img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /&gt;&lt;/a&gt;&lt;/li&gt;');
          });
      });
      var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
  });
  </code></pre>
  
  <p>Is there a way to refresh the <code>ul</code> prior to calling the photoswipe initiator, or is there another event that I should be using for photoswipe?</p>