FancyBox not working after ajax pagination. How to fix?

Question

PHP

I do this:
in the main file I load content using AJAX.
index.php listing

...
<div class="loading-div text-center"><img src="images/loader.gif" ></div>
<div id="results_1"><!-- content will be loaded here --></div>
...
    <script>
      $(document).ready(function() {
        $("#results_1" ).load( "fetch_pages.php"); //load initial records
        $(".loading-div").hide();
        //executes code below when user click on pagination links
        $("#results_1").on( "click", ".pagination a", function (e){
          e.preventDefault();
          $(".loading-div").show(); //show loading element
          var page = $(this).attr("data-page"); //get page number from link
          $("#results_1").load("fetch_pages.php",{"page":page}, function(){ //get content from PHP page
              $(".loading-div").hide(); //once done, hide loading element
              //$().fancybox();
          });		        
        });
      });
    </script>

in php, which I am accessing, I generate content and pagination to move through the content pages (it is just FancyBox that is registered in it).
Listing fetch_pages.php:

<?php
$db_username        = '***'; //database username *** = секрет
$db_password        = '***'; //dataabse password *** = секрет
$db_name            = '***'; //database name *** = секрет
$db_host            = 'localhost:3306'; //hostname or IP
$item_per_page      = 3; //item to display per page

$mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
//Output any connection error
if ($mysqli->connect_error) {
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
else
    $mysqli->set_charset( 'utf8' );


//Get page number from Ajax
if(isset($_POST["page"])){
    $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); //filter number
    if(!is_numeric($page_number)){die('Invalid page number!');} //incase of invalid page number
}else{
    $page_number = 1; //if there's no page number, set it to 1
}

$cat_id = 1;

//get total number of records from database
$results = $mysqli->query("SELECT COUNT(*) FROM `product` WHERE category_id=$cat_id");
$get_total_rows = $results->fetch_row(); //hold total records in variable
//break records into pages
$total_pages = ceil($get_total_rows[0]/$item_per_page);

//position of records
$page_position = (($page_number-1) * $item_per_page);

//Limit our results within a specified range. 
$results = $mysqli->prepare("SELECT * FROM `product` WHERE category_id=$cat_id ORDER BY id ASC LIMIT $page_position, $item_per_page");
$results->execute(); //Execute prepared Query
$results->bind_result($id, $title, $description, $full_description, $price, $image, $category_id); //bind variables to prepared statement

//Display records fetched from database.
echo '<ul class="contents">';
echo '<div class="row">';
while($results->fetch()){?>
    <!-- echo '<li>';
    echo  $id. '. <strong>' .$name.'</strong> &mdash; '.$message;
    echo '</li>'; -->


            

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 EinWare">
      <h3><?php echo $title?></h3>
      <a class="Produktbeschreibung" href="#produkte<?php echo $id ?>"><img src="/images/<?php echo $image?>" class="Einzug3 imaginator2"></a>
      <p class="EinWareP"><?php echo $description?></p>
      <p class="price">Цена: <?php echo $price?> рублей</p>
      <a class="Produktbeschreibung" href="#produkte<?php echo $id ?>">Подробнее</a>
    <form class="variants">
      <input type="button" class="buy btn btn-custom" onclick="add_to_cart(<?php echo $id?>)" value="Купить" data-result-text="Куплено"/>
    </form>
    </div>
    <div style="display: none;">
    <div id="produkte<?php echo $id ?>" class="container-fluid col-xs-10 col-sm-10 col-md-10 col-lg-10">
      <h3><?php echo $title?></h3>
      <div class="col-md-3">
        <img src="/images/<?php echo $image?>" class="Einzug3 imaginator2">
      </div>
      <div class="col-md-6">
        <p><?php echo $full_description?></p>
        <p><?php echo $description?></p>
     			<p class="price">Цена: <?php echo $price?> рублей</p>
        <form class="variants">
          <input type="button" class="buy btn btn-custom" onclick="add_to_cart(<?php echo $id?>)" value="Купить" data-result-text="Куплено"/>
        </form>
      </div>
    </div>
    </div>
<?php
}
?>
</div>

<div class="row-fluid text-right">
<?php
echo paginate_function($item_per_page, $page_number, $get_total_rows[0], $total_pages);
?>
</div>
<?php
// echo '</div>';
function paginate_function($item_per_page, $current_page, $total_records, $total_pages)
{
    $pagination = '';
    if($total_pages > 0 && $total_pages != 1 && $current_page <= $total_pages){ //verify total pages and current page number
        $pagination .= '<ul class="pagination">';
        
        $right_links    = $current_page + 3; 
        $previous       = $current_page - 3; //previous link 
        $next           = $current_page + 1; //next link
        $first_link     = true; //boolean var to decide our first link
        
        if($current_page > 1){
            $previous_link = ($previous<=0)?1:$current_page - 1;
            $pagination .= '<li class="first"><a href="#" data-page="1" title="Первая">&laquo;</a></li>'; //first link
            $pagination .= '<li><a href="#" data-page="'.$previous_link.'" title="Предыдущая">&lt;</a></li>'; //previous link
                for($i = ($current_page-2); $i < $current_page; $i++){ //Create left-hand side links
                    if($i > 0){
                        $pagination .= '<li><a href="#" data-page="'.$i.'" title="Страница '.$i.'">'.$i.'</a></li>';
                    }
                }   
            $first_link = false; //set first link to false
        }
        
        if($first_link){ //if current active page is first link
          $pagination .= '<li class="first active"><a href="#" data-page="'.$current_page.'" title="Страница '.$current_page.'">'.$current_page.'</a></li>';
        }
        elseif($current_page == $total_pages){ //if it's the last active link
            $pagination .= '<li class="last active"><a href="#" data-page="'.$current_page.'" title="Страница '.$current_page.'">'.$current_page.'</a></li>';
        }else{ //regular current link
            $pagination .= '<li class="active"><a href="#" data-page="'.$current_page.'" title="Страница '.$current_page.'">'.$current_page.'</a></li>';
        }
                
        for($i = $current_page+1; $i < $right_links ; $i++){ //create right-hand side links
            if($i<=$total_pages){
                $pagination .= '<li><a href="#" data-page="'.$i.'" title="Страница '.$i.'">'.$i.'</a></li>';
            }
        }
        if($current_page < $total_pages){ 
                $next_link = ($i > $total_pages)? $total_pages : $i;
                $pagination .= '<li><a href="#" data-page="'.$next_link.'" title="Следующая">&gt;</a></li>'; //next link
                $pagination .= '<li class="last"><a href="#" data-page="'.$total_pages.'" title="Последняя">&raquo;</a></li>'; //last link
        }
        
        $pagination .= '</ul>'; 
    }
    return $pagination; //return pagination links
}
?>
<script src="/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script>
    //$.noConflict();
    $(document).ready(function(){
      $(".Produktbeschreibung").fancybox({
        'centerOnScroll' : true,  
        'transitionIn': 'elastic',
        'transitionOut': 'elastic'
      });
      $(".Warenkorb_in_Rahmen").fancybox({
        'width'				: '75%',
        'height'			: '75%',
        'centerOnScroll' : true,  
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'type'				: 'iframe'
      });
    });
    </script>

The whole problem is that when the content is initially loaded, the FancyBox works, but when you switch to another page using AJAX, there is no pagination. And I also noticed this fact: FancyBox does not work yet if it is written in index.php (strange).

Answer 1

solved by adding to the end of index.php:

$(document).ajaxStop(function() {
        $(".Produktbeschreibung").fancybox({
          'centerOnScroll' : true,  
          'transitionIn': 'elastic',
          'transitionOut': 'elastic'
        });
      });

And from fetches_pages.php just removed this piece of code with FancyBox