title: Javascript - Magnific Popup not working when HTML Elements are generated using Javascript
body: <p>I have a problem regarding the magnific popup, so whenever i type the code in HTML, its working but whenever I try using Javascript to generate the HTML element that have popup menu, the popup not appear.</p>
  
  <p>Here my HTML Code to show the popup using HTML Code and its working</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
       &lt;html lang="en"&gt;
      &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;/head&gt;
      &lt;body&gt;
    &lt;div class="right-side"&gt;
      &lt;div class="logo"&gt;&lt;/div&gt;
      &lt;div class="right-content"&gt;
          &lt;div class="right-content-row profile"&gt;
              &lt;h6&gt;Welcome,&lt;/h6&gt;
              &lt;p&gt;&lt;b id='customer_email' name ='customer_email'&gt;&lt;/b&gt;&lt;/p&gt;
              &lt;!--You are being served by &lt;br&gt;&lt;br&gt; &lt;b id ='emp_name' name='emp_name'&gt;&lt;/b&gt;--&gt;
          &lt;/div&gt;
                      &lt;div class="right-content-row order-total"&gt;
              TOTAL &lt;span&gt;150&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="right-content-row poweredby"&gt;
              &lt;p&gt;POWERED BY &lt;span class="logo-ifabula" onClick="document.location='http://ifabula.com'" style="cursor:pointer"&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="left-side"&gt;
      &lt;div class="top-nav"&gt;
          &lt;ul id='tab' name='tab'&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="sub-nav"&gt;
          &lt;ul id='tab_child' name='tab_child'&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="left-side-content"&gt;
          &lt;div class="catalog-content"&gt;
              &lt;b id='prod_item'&gt;&lt;/b&gt;
              &lt;div id='prod_item_display'&gt;
  
              &lt;/div&gt;  
              &lt;!--&lt;h1&gt;Raciones&lt;/h1&gt; --&gt;
              &lt;b id='ts'&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a class="open-popup-link" href="#popup-product"&gt;
                      &lt;img src="http://localhost/tapas//img/prod_gallery/Aglio_Salmon_thumb.jpg"&gt;
                      &lt;h2&gt;Aglio Salmon&lt;/h2&gt;
                      &lt;p class="price"&gt;70,000&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#popup-product" class="open-popup-link"&gt;
                      &lt;img src="images/img-product.jpg" /&gt;
                      &lt;h2&gt;Olives&lt;/h2&gt;
                      &lt;p class="price"&gt;30&lt;/p&gt; 
                  &lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/b&gt;
  
  
          &lt;/div&gt;
          &lt;p class="footnote" style="display:none;"&gt;All prices in thousand Indonesian Rupiah. Prices can be change in anytime without notice. Tax &amp; Service charges are not included!&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;p id='popup_item' name='popup_item'&gt;&lt;/b&gt;
  &lt;div id="popup-product" class="popup-product mfp-hide"&gt;
      &lt;div class="popup-product-img"&gt;
          &lt;img src="images/img-product.jpg" /&gt;
          &lt;h1&gt;Bread with Tomato Sauce &amp; Iberico Ham&lt;/h1&gt;
      &lt;/div&gt;
      &lt;p class="popup-product-description"&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.&lt;/p&gt;
      &lt;div class="popup-product-option"&gt;
          QUANTITY &amp;nbsp; &lt;input id="down" onClick="setQuantity('down');" type="button" class="minus" /&gt; &lt;input id="quantity" type="text" value="1" min="0" /&gt; &lt;input id="up" onClick="setQuantity('up');" type="button" class="plus" /&gt; &lt;input type="submit" value="ORDER" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- jQuery 1.7.2+ or Zepto.js 1.0+ --&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;     
  &lt;!--&lt;script src="http://code.jquery.com/jquery-1.9.0.js"&gt;&lt;/script&gt; --&gt;
  &lt;!-- Magnific Popup core JS file --&gt;
  &lt;script src="js/catalog2.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.magnific-popup.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.jscrollpane.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.mousewheel.js"&gt;&lt;/script&gt;
  &lt;script src="js/default.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css"&gt;
  &lt;link rel="stylesheet" href="css/magnific-popup.css"&gt; 
  
  &lt;script type="text/javascript" src="js/jquery.smartCart-2.0.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here the Javascript code to generate the list of item from JSON Return and the popup is not working</p>
  
  <pre><code>$.ajax({
                      type: "POST",
                      url : "http://127.0.0.1/menu/menu_controller/display_child_item/"+child_category_id[item_child],
                      data : "CategoryUUID="+child_category_id,
                      dataType: "json",
                      success: function(result_item)
                      {
                          for (var prod_item in result_item)
                          {
                              x = x+1;
                              if(x == 1)
                              {
  
                                  prod_display.push('&lt;h1&gt;'+child_name[0]+'&lt;/h1&gt;');
                                  prod_display.push('&lt;ul&gt;');
  
                                  prod_display.push("&lt;li&gt;&lt;a class='open-popup-link' href='#popup-product'&gt;&lt;img src='http://localhost/tapas/"+result_item[prod_item].image_thumbnail.toString()+"'/&gt;&lt;h2&gt;"+result_item[prod_item].product_name.toString()+"&lt;/h2&gt;&lt;p class='price'&gt;"+numberWithCommas(result_item[prod_item].price.toString())+"&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;");                                      
                                  popup_product.push('&lt;div id="popup-product'+result_item[prod_item].ProductUUID.toString()+'" class="popup-product mfp-hide"&gt;&lt;div class="popup-product-img"&gt;&lt;img src="images/img-product.jpg" /&gt; &lt;h1&gt;Bread with Tomato Sauce &amp; Iberico Ham&lt;/h1&gt;&lt;/div&gt;&lt;p class="popup-product-description"&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.&lt;/p&gt;&lt;div class="popup-product-option"&gt;      QUANTITY &amp;nbsp; &lt;input id="down"  type="button" class="minus" /&gt; &lt;input id="quantity" type="text" value="1" min="0" /&gt; &lt;input id="up"  type="button" class="plus" /&gt; &lt;input type="submit" value="ORDER" /&gt;&lt;/div&gt;&lt;/div&gt;');       
                              }
                              else if(x != 1)
                              {
                                  prod_display.push('&lt;li&gt;&lt;a id="test" class="open-popup-link" href="#popup-product" class="open-popup-link"&gt;&lt;img src="http://localhost/tapas/'+result_item[prod_item].image_thumbnail.toString()+'"/&gt;&lt;h2&gt;'+result_item[prod_item].product_name.toString()+'&lt;/h2&gt;&lt;p class="price"&gt;'+numberWithCommas(result_item[prod_item].price.toString())+'&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;');                                        
                                  popup_product.push('&lt;div id="popup-product'+result_item[prod_item].ProductUUID.toString()+'" class="popup-product mfp-hide"&gt;&lt;div class="popup-product-img"&gt;&lt;img src="images/img-product.jpg" /&gt; &lt;h1&gt;Bread with Tomato Sauce &amp; Iberico Ham&lt;/h1&gt;&lt;/div&gt;&lt;p class="popup-product-description"&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.&lt;/p&gt;&lt;div class="popup-product-option"&gt;      QUANTITY &amp;nbsp; &lt;input id="down"  type="button" class="minus" /&gt; &lt;input id="quantity" type="text" value="1" min="0" /&gt; &lt;input id="up"  type="button" class="plus" /&gt; &lt;input type="submit" value="ORDER" /&gt;&lt;/div&gt;&lt;/div&gt;');                           
  
                              }
  
                          }
                          prod_display.push('&lt;/ul&gt;');
  
  
                          document.getElementById("prod_item_display").innerHTML = prod_display.join('');
  
                      }
  </code></pre>
  
  <p>COuld you please help me to find out what is the solution for this. Already do countless trial and errors but no luck :(</p>