title: jquery mobile popup not working (for loop)?
body: <p>I tried to create pop ups using for-loop, but does not work. Why?</p>
  
  <p><a href="http://jsfiddle.net/edgardaraujo/Rud3G/2/" rel="nofollow">http://jsfiddle.net/edgardaraujo/Rud3G/2/</a></p>
  
  <p>I thank you all for the help.</p>
  
  <pre><code>content html
  
  &lt;div data-role="page" id="page1"&gt;
      &lt;div data-role="content"&gt;
          &lt;div id="output"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /content --&gt;
  &lt;/div&gt;
  
  
  content jquery
  
  var array = new Array();
  
  array[0] = "link-image-1";
  array[1] = "link-image-2";
  array[2] = "link-image-3";
  var len = Object.keys(array).length;
  
  for (i = 0; i &lt; len; i++) {
  
      var popup = array[i];
  
      $('#output').css({'font-weight': 'bold'}).append('&lt;a href="#' + popup + '" data-rel="popup" data-position-to="window" data-transition="fade"&gt;&lt;img class="popphoto" src="' + popup + '" alt="photo, test" style="width:30%"&gt;&lt;/a&gt;');
  
      var arrayPhotos = $('&lt;div data-role="popup" id="' + popup + '" data-overlay-theme="a" data-theme="d" data-corners="false"&gt;&lt;/div&gt;');
  
      arrayPhotos.append('&lt;a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"&gt;Close&lt;/a&gt;   &lt;img class="popphoto" src="' + popup + '" style="max-height:512px;" alt="photo, test"&gt;');
  
  }
  </code></pre>