title: Ajax call not working second time
body: <p>I have this ajax/php structure that works perfectly when selecting one image. But, if I click on "selecteer" to perform the same code for the second time, no images are shown. The "ajax" page does load correctly though.</p>
  
  <p>Basically what I have;</p>
  
  <p>Article page: This page shows 10 buttons "Selecteer". Under these 10 buttons you have a div where some images are shown after pressing Selecteer. When clicking on one of those images, the clicked image is selected and will be shown solely.
  Javascript: This script binds the click events, and performs the ajax loading aswell as the image showing.
  Images page: this page is loaded by ajax and is shown in a div inside the article page.</p>
  
  <p>EDIT:</p>
  
  <p>I did some testing. The second time the div is loaded with an ajax call (the images page) it does "Create" all the images with the createImage function. Yet I only see the search bar and the "zoek" button. So the real problem is: the images aren't showing the second time!</p>
  
  <p>The code (I left some things out which I think are irrelevant)</p>
  
  <p>article:</p>
  
  <pre><code>&lt;?php for($i = 0; $i &lt; constant("MAX_PICS"); $i++) { ?&gt;
  &lt;button &lt;?php echo"id='select_portal$i' class='select_portal_class'";?&gt; type="button"&gt;Selecteer&lt;/button&gt;
  &lt;div &lt;?php echo"id='dialog_form$i'";?&gt; style="display:none; position:absolute; width:auto; height:auto; margin-left: auto; margin-right: auto; z-index:1;"&gt;&lt;/div&gt;
  &lt;div &lt;?php echo"id='selected_image$i'";?&gt; style="display:block;  width:auto; height:auto"&gt;
  &lt;?php if(isset($_GET['edit_artikel'])) { ?&gt;&lt;img src="../images/&lt;?php $beeldbank = Beeldbank::find_by_portal_id($artikel-&gt;portal_id); echo $beeldbank[0]-&gt;imagelib_id; ?&gt;/&lt;?php echo $artikel-&gt;portal_id;?&gt;" id="selid" width="125" /&gt; &lt;?php } else {?&gt;
  &lt;img src="../images/icons/no_image_found.png" alt="No image available" &lt;?php echo"id='selid$i'";?&gt; width="125" /&gt; &lt;?php } ?&gt;
  &lt;input type="hidden" &lt;?php echo"id='portal_id$i'";?&gt; name="portal_id" value="&lt;?php if(isset($_GET['edit_artikel'])) { echo $artikel-&gt;portal_id; } ?&gt;" /&gt;
  &lt;/div&gt;
  &lt;div id="selected_portal"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$(document).ready(function() {
      (function() {
          var script    = document.createElement('script');
          script.type   = 'text/javascript';
          script.src    = document.location.protocol + '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
          var script2   = document.createElement('script');
          script2.type  = 'text/javascript';
          script2.src   = document.location.protocol + '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js';
  
          document.getElementsByTagName('head')[0].appendChild(script);
          document.getElementsByTagName('head')[0].appendChild(script2);
      })();   
  
  $( ".select_portal_class" ).each(
  
      function( intIndex ){
              $(this).bind('click', function() {   
                  loadAjaxFrame(intIndex);
              });
      }
      );
  });
  
  function loadAjaxFrame(id)
  {
      var dialog = $("#dialog_form"+id);
      //alert(dialog.attr('id'));
      dialog.css("display", "block");
      dialog.css("top", "auto");
      dialog.css("left", "auto");
      dialog.css("right", "auto");
      dialog.css("backgroundColor", "white");
      document.getElementById(dialog.attr('id')).style.visibility = 'visible';
      tempDialogID = id;
  
      if(!ajaxLoad){
          dialog.load("imglib.php");
          ajaxLoad = true;
      }
  }
  
  function showImage()
  {
      var portal     = $("#portal_id"+tempDialogID);
      var dialog     = $("#dialog_form"+tempDialogID);
      var selid      = $("#selid"+tempDialogID);
      alert(tempDialogID);
      var img        = document.getElementById(selid.attr('id'));
      img.src        = imgname;
      var portal_id  = document.getElementById(portal.attr('id'));
      portal_id.value= imgid;
      document.getElementById(dialog.attr('id')).style.visibility = 'hidden';
      dialog.unload();
      ajaxLoad = false;
  }
  function create_image(src,alt) {
      var img      = document.createElement("img");
      var objTo    = document.getElementById('imagesDiv');
      img.src      = src;
      img.alt      = alt;
      img.className= "imgid";
  
      $(img).height(imageHeight);
      $(img).width(imageWidth);
      $(img).bind('click', 'span', function () { imgid = alt; imgname = src; showImage(); });
      objTo.appendChild(img);
  }
  $('#formpie').on('submit', function(e) {
      e.preventDefault();
      var dialog = $("#dialog_form"+tempDialogID);
      $.ajax({
          type   : 'POST',
          url    : "imglib.php",
          data   : $(this).serializeArray(),
          success: function(data) {
              dialog.html(data);
          }
      });
  });
  </code></pre>
  
  <p>And finally the images page:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="javascripts/SelectImage.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var photos    = &lt;?php echo json_encode($photoSources); ?&gt;;
      var photoAlts = &lt;?php echo json_encode($photoAlts); ?&gt;;
      var photoTags = &lt;?php echo json_encode($photoTags); ?&gt;;
      var photoCount= &lt;?php echo $total_count; ?&gt;;
      photoCount    = photoCount/10;
      photoCount    = Math.ceil(photoCount);
      function buttonClicked(id){
          var page  = id;
          photoPage = page*10;
          minCount  = photoPage-10;
          maxCount  = photoPage;
          jQuery("#imagesDiv").html("");
          createButtons();
          $( "#imagesDiv" ).append( " &lt;br/&gt;");
          populateDiv();
      }
      function createButtons() {
          var i     = 1;
          var button= "";
          while(i &lt;= photoCount)
          {
              var button    = document.createElement("BUTTON");
              var buttonName= document.createTextNode(i);
              button.appendChild(buttonName);
              button.id     = i;
              jQuery(button).bind('click', { id: i}, function(event) {
                  var data  = event.data;
                  buttonClicked(data.id);
              });
              var objTo = document.getElementById('imagesDiv');
              objTo.appendChild(button);
              i++;
          }
      }
      $(".moreButton").click(function() {
              maxCount += 10;
              minCount += 10;
              jQuery("#imagesDiv").html("");
              populateDiv();
      });
      function populateDiv() {
          for(var i = minCount;i &lt; maxCount; i++)
          {
              if(i &lt; &lt;?php echo $total_count ?&gt;)
              {
                  create_image("../"+photos[i],photoAlts[i]);
                  $( "#imagesDiv" ).append( "&lt;p style=\"display:inline; padding-left:10px;\"&gt;" + photoTags[i] + "&lt;/p&gt;&lt;br/&gt;" );
              }
          }
      }
      createButtons()
      $( "#imagesDiv" ).append( " &lt;br/&gt;");
      populateDiv();
  });
  &lt;/script&gt; &lt;?php
  
  if(isset($_POST['submit'])) {
      $artikel-&gt;portal_id = $_POST['portal_id'];
  }?&gt;
  
  &lt;fieldset&gt;
       Afbeelding zoeken
   &lt;form id="formpie" name="zoek" action="" method="POST"&gt;
    &lt;input type="hidden" name="zoek" value="zoek" id="zoek"/&gt;
    &lt;input type="text" name="tags" size="31" id="tags"/&gt;
  
    &lt;input type="submit" name="zoek" id="search" value="Zoek" /&gt;
  &lt;/form&gt;
      &lt;div id="imagesDiv" style="width:800px; height:780px;"&gt;
      &lt;label for="portal_id"&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;div id="selected_img_div" style="display:none; width:auto; height:auto;"&gt;
      &lt;?php if($selected_image == NULL) { echo "No image selected"; } 
      else { echo '&lt;img src="images/'.$selected_image.' class="selimgid"/&gt;'; } ?&gt;
  &lt;/div&gt;
  </code></pre>