Javascript

Question

我有一个关于 magnific 弹出窗口的问题，所以每当我在 HTML 中键入代码时，它的工作，但每当我尝试使用 Javascript 生成具有的 HTML 元素时弹出菜单，弹出框不出现

这里是我的 HTML 代码，使用 HTML 代码及其工作方式显示弹出窗口

    <!DOCTYPE html>
     <html lang="en">
    <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
    <body>
  <div class="right-side">
    <div class="logo"></div>
    <div class="right-content">
        <div class="right-content-row profile">
            <h6>Welcome,</h6>
            <p><b id='customer_email' name ='customer_email'></b></p>
            <!--You are being served by <br><br> <b id ='emp_name' name='emp_name'></b>-->
        </div>
                    <div class="right-content-row order-total">
            TOTAL <span>150</span>
        </div>
        <div class="right-content-row poweredby">
            <p>POWERED BY <span class="logo-ifabula" onClick="document.location='http://ifabula.com'" style="cursor:pointer"></span></p>
        </div>
    </div>
</div>

<div class="left-side">
    <div class="top-nav">
        <ul id='tab' name='tab'>

        </ul>
    </div>

    <div class="sub-nav">
        <ul id='tab_child' name='tab_child'>

        </ul>
    </div>
    <div class="left-side-content">
        <div class="catalog-content">
            <b id='prod_item'></b>
            <div id='prod_item_display'>

            </div>  
            <!--<h1>Raciones</h1> -->
            <b id='ts'>
            <ul>
                <li>
                    <a class="open-popup-link" href="#popup-product">
                    <img src="http://localhost/tapas//img/prod_gallery/Aglio_Salmon_thumb.jpg">
                    <h2>Aglio Salmon</h2>
                    <p class="price">70,000</p>
                    </a>
                </li>
                <li><a href="#popup-product" class="open-popup-link">
                    <img src="images/img-product.jpg" />
                    <h2>Olives</h2>
                    <p class="price">30</p> 
                </a></li>
            </ul>
            </b>


        </div>
        <p class="footnote" style="display:none;">All prices in thousand Indonesian Rupiah. Prices can be change in anytime without notice. Tax & Service charges are not included!</p>
    </div>

</div>
<p id='popup_item' name='popup_item'></b>
<div id="popup-product" class="popup-product mfp-hide">
    <div class="popup-product-img">
        <img src="images/img-product.jpg" />
        <h1>Bread with Tomato Sauce & Iberico Ham</h1>
    </div>
    <p class="popup-product-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
    <div class="popup-product-option">
        QUANTITY &nbsp; <input id="down" onClick="setQuantity('down');" type="button" class="minus" /> <input id="quantity" type="text" value="1" min="0" /> <input id="up" onClick="setQuantity('up');" type="button" class="plus" /> <input type="submit" value="ORDER" />
    </div>
</div>

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>     
<!--<script src="http://code.jquery.com/jquery-1.9.0.js"></script> -->
<!-- Magnific Popup core JS file -->
<script src="js/catalog2.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/default.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css">
<link rel="stylesheet" href="css/magnific-popup.css"> 

<script type="text/javascript" src="js/jquery.smartCart-2.0.js"></script>

</body>
</html>

此处的 Javascript 代码用于从 JSON Return 生成项目列表并且弹出窗口不起作用

$.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('<h1>'+child_name[0]+'</h1>');
                                prod_display.push('<ul>');

                                prod_display.push("<li><a class='open-popup-link' href='#popup-product'><img src='http://localhost/tapas/"+result_item[prod_item].image_thumbnail.toString()+"'/><h2>"+result_item[prod_item].product_name.toString()+"</h2><p class='price'>"+numberWithCommas(result_item[prod_item].price.toString())+"</p></a></li>");                                      
                                popup_product.push('<div id="popup-product'+result_item[prod_item].ProductUUID.toString()+'" class="popup-product mfp-hide"><div class="popup-product-img"><img src="images/img-product.jpg" /> <h1>Bread with Tomato Sauce & Iberico Ham</h1></div><p class="popup-product-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p><div class="popup-product-option">      QUANTITY &nbsp; <input id="down"  type="button" class="minus" /> <input id="quantity" type="text" value="1" min="0" /> <input id="up"  type="button" class="plus" /> <input type="submit" value="ORDER" /></div></div>');       
                            }
                            else if(x != 1)
                            {
                                prod_display.push('<li><a id="test" class="open-popup-link" href="#popup-product" class="open-popup-link"><img src="http://localhost/tapas/'+result_item[prod_item].image_thumbnail.toString()+'"/><h2>'+result_item[prod_item].product_name.toString()+'</h2><p class="price">'+numberWithCommas(result_item[prod_item].price.toString())+'</p></a></li>');                                        
                                popup_product.push('<div id="popup-product'+result_item[prod_item].ProductUUID.toString()+'" class="popup-product mfp-hide"><div class="popup-product-img"><img src="images/img-product.jpg" /> <h1>Bread with Tomato Sauce & Iberico Ham</h1></div><p class="popup-product-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p><div class="popup-product-option">      QUANTITY &nbsp; <input id="down"  type="button" class="minus" /> <input id="quantity" type="text" value="1" min="0" /> <input id="up"  type="button" class="plus" /> <input type="submit" value="ORDER" /></div></div>');                           

                            }

                        }
                        prod_display.push('</ul>');


                        document.getElementById("prod_item_display").innerHTML = prod_display.join('');

                    }

能否请您帮我找出解决此问题的方法。已经做了无数次试验和错误，但没有运气:(

Answer 1

试试下面的代码。它是event delegation问题

$(document).on('click', '.open-popup-link',function(){
  var popupSRC = $(this).parent('li').next('div.popup-product');
  $.magnificPopup.open({
      items: {
          src: popupSRC,
      },
      type: 'inline'
  });
});

Javascript - 当使用 Javascript 生成 HTML 元素时，Magnific Popup 不工作

Javascript - Magnific Popup not working when HTML Elements are generated using Javascript

jquery

html

popup

magnific-popup