Javascript - 使用 Javascript 生成 HTML 元素时，放大的弹出窗口不起作用-6ren

Javascript - 使用 Javascript 生成 HTML 元素时，放大的弹出窗口不起作用

转载作者：行者123 更新时间：2023-11-28 07:31:23

我对放大的弹出窗口有疑问，因此每当我在 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>

这里是从 JSON Return 生成项目列表的 Javascript 代码，但弹出窗口不起作用

$.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('');

                    }

您能帮我找出解决方案吗？已经做了无数次尝试和错误，但没有运气:(

最佳答案

尝试下面的代码。它是 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 元素时，放大的弹出窗口不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29092799/

文章推荐： html - 悬停框并更改顶部的三 Angular 形

文章推荐： c++ - 使用自定义转换运算符向上转换到模板类

文章推荐： javascript - 如何使我的表单正确自动缩放？

文章推荐： c++ - IE9和IE10的下载URL历史记录

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript - 使用 Javascript 生成 HTML 元素时，放大的弹出窗口不起作用