jquery - Javascript - Magnific Popup not working when HTML Elements are generated using Javascript -
i have problem regarding magnific popup, whenever type code in html, working whenever try using javascript generate html element have popup menu, popup not appear.
here html code show popup using html code , working
<!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 being served <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 <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 change in anytime without notice. tax & service charges 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 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 <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> here javascript code generate list of item json return , popup not working
$.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) { (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 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 <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 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 <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(''); } could please me find out solution this. countless trial , errors no luck :(
try below code .it event delegation isue
$(document).on('click', '.open-popup-link',function(){ var popupsrc = $(this).parent('li').next('div.popup-product'); $.magnificpopup.open({ items: { src: popupsrc, }, type: 'inline' }); });
Comments
Post a Comment