After jquery auto refresh a div popup doesnt work

Question

I have a jquery which refreshes the div but after refresh the popup doesn't work from the refreshed data.

<script type="text/javascript">
    $(function() {
        $.ajaxSetup ({
            cache: false
        });
        //Refresh trigger `#newORDERx`
        var auto_refreshes = setInterval(function () {$('#newORDERx').load('inc/restAdmin_orders_rcvz.php');}, 1000);
    });
</script>
<div id="newORDERx"></div>

When i use it like below then popup works fine but then it doesn't refresh the div.

<script type="text/javascript">
    $(document).ready(function(){
        $.ajaxSetup ({
            cache: false
            mainClass: 'pp-product-detail' // when i use this then popup works but then doesn't refresh the div
        });
        var auto_refreshes = setInterval(function () {$('#newORDERx').load('inc/restAdmin_orders_rcvz.php');}, 1000);
    });

</script>

pp-product-detail class

AJAX popup

if ($('.pp-product-detail').length) {
   $('.pp-product-detail').magnificPopup({
       type: 'ajax'
   });
}

restAdmin_orders_rcvz.php

<div class="col-lg-6">
  <div class="the-menu-item">
    <div class="image-wrap">
      <a class="pp-product-detail" href="product-detail-popup-rest-admin-order-rcv.php?iid=<?php echo $phporder; ?>">
      <img src="images/themenu/img-1.jpg" alt="">
      </a>
    </div>
    <div class="the-menu-body">
      <b><font color='red'> Order # </font> <?php echo $phporder; ?><br>
      <font color='red'> Items Included : </font> <?php echo $lrsa['count']; ?>
      <br><font color='red'>Dated : </font> <?php echo date("d/m/Y", strtotime($phpdates)); ?>
      </b>
    </div>
  </div>
</div>

Answer 1

I have just added following file in restAdmin_orders_rcvz.php and its working fine.

<script type="text/javascript" src="js/scripts.js"></script>

restAdmin_orders_rcvz.php

<div class="col-lg-6">
  <div class="the-menu-item">
    <div class="image-wrap">
      <a class="pp-product-detail" href="product-detail-popup-rest-admin-order-rcv.php?iid=<?php echo $phporder; ?>">
      <img src="images/themenu/img-1.jpg" alt="">
      </a>
    </div>
    <div class="the-menu-body">
      <b><font color='red'> Order # </font> <?php echo $phporder; ?><br>
      <font color='red'> Items Included : </font> <?php echo $lrsa['count']; ?>
      <br><font color='red'>Dated : </font> <?php echo date("d/m/Y", strtotime($phpdates)); ?>
      </b>
    </div>
  </div>
</div>

Answer 2

Okay... I'm pretty sure that the problem is in your class, since you re-write the .pp-product-detail element...

So try to change it to this:

if ($(document).find('.pp-product-detail').length) {
   $(document).find('.pp-product-detail').magnificPopup({
       type: 'ajax'
   });
}