title: jquery.magnific-popup not working when generated after ajax post
body: <p>my problem is when i append to the div from jquery after ajax post the popup magnifier does not work at all</p>
  
  <p>i am using jquery.magnific-popup </p>
  
  <pre><code>    $(document).ready(function () {
          $('.image-popup').magnificPopup({
              type: 'image',
              closeOnContentClick: true,
              mainClass: 'mfp-fade',
              gallery: {
                  enabled: true,
                  navigateByImgClick: true,
                  preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
              }
          });
      });
  </code></pre>
  
  <p>and this is my div</p>
  
  <pre><code>&lt;div id="officialDiv" class="row m-b-15"&gt;
  &lt;%
      for (int i = 0; i &lt; officialDocsList.Count; i++)
      {
  %&gt;
  &lt;div class="col-sm-6 col-lg-3 col-md-4 mobiles" style="flex: 0 0 15%; max-width: 15%;"&gt;
      &lt;div class="product-list-box thumb"&gt;
          &lt;a href="&lt;%= officialDocsList[i] %&gt;" class="image-popup" title="Screenshot-1"&gt;
              &lt;img style="width:100px;height:100px;" src="&lt;%= officialDocsList[i] %&gt;" class="thumb-img" alt="work-thumbnail"&gt;
          &lt;/a&gt;
  
          &lt;div class="product-action"&gt;
              &lt;a href="#" class="btn btn-danger btn-sm"&gt;&lt;i class="md md-close"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;%} %&gt;
  </code></pre>
  
  <p></p>
  
  <p>but i need to append to the div on file input upload so i did the below : </p>
  
  <pre><code> $('#officialDoc').on('change', function (event) {
  var files = $("#officialDoc").prop("files");
  for (var i = 0; i &lt; files.length; i++) {
      (function (file) {
          var fileReader = new FileReader();
          fileReader.onload = function (f) {
              var d = f.target.result;
              var img = d.split("base64,").pop();
              var byteArray = _base64ToArrayBuffer(img);
  
              $.ajax({
                  type: "POST",
                  url: "BusinessLogic/SaveTempFiles.ashx",
                  data: {
                      'file': img,
                      'name': file.name
                  },
                  success: function (result) {
                      $("#OfficialDocsPath").val($("#OfficialDocsPath").val() + ',' + result);
                      $("#officialDiv").append("&lt;div class='col-sm-6 col-lg-3 col-md-4 mobiles' style='flex: 0 0 15%; max-width: 15%;'&gt;&lt;div class='product-list-box thumb'&gt;&lt;a href='" + result + "' class='image-popup' title='Screenshot-1'&gt;&lt;img src='" + result + "' class='thumb-img' style='width:100px;height:100px;' alt='work-thumbnail'&gt;&lt;/a&gt;&lt;div class='product-action'&gt; &lt;a href='#' class='btn btn-danger btn-sm'&gt;&lt;i class='md md-close'&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt;&lt;/div&gt; &lt;/div&gt;");
                  }
              });
          };
          fileReader.readAsDataURL(file);
      })(files[i]);
  }});   
  </code></pre>