Remote URL model Not working with infinite scroll

Question

I have a blog and this blog contains posts. I rendered these posts using infinite scroll, there are posts that already exist when the page loading and there are posts rendered via infinite scroll, So the problem is the model is working with just the posts that were already loaded with the page but Not working with posts that render by infinite scroll

The infinite scroll

<div class="infinite-container" id="my-infinite-scrolling-list">
 {% for post in post %}
  <div class="theContainer mt-3 infinite-item" >

...

   </div>
 {% for post in post %}
</div>

The infinite scroll Javascript

var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0],
        bufferPx : 1000,
        offset: 'bottom-in-view',

        history: 'push',
        path: '.pagination__next',

        onBeforePageLoad: function () {
            $('.loading').show();
        },
        onAfterPageLoad: function () {
            $('.loading').hide();
        },

    });

The Model Html

<div class="infinite-container" id="my-infinite-scrolling-list">
     {% for post in post %}
      <div class="theContainer mt-3 infinite-item" >
    
    ...
            <a href="javascript:void(0);" data-href="{% url 'comments' pk=video.pk %}" class="openPopup"></a>
                <div class="modal fade" id="myModal" role="dialog">
                  <div class="modal-dialog">
                  
                      <!-- Modal content-->
                      <div class="modal-content">
                          <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h4 class="modal-title">Bootstrap Modal with Dynamic Content</h4>
                          </div>
                          <div class="modal-body">
              
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                      </div>
                    
                  </div>
              </div>
    ...
    
       </div>
     {% for post in post %}
    </div>

The Model Javascript

 $(document).ready(function(){
    $('.openPopup').on('click',function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#myModal').modal({show:true});
        });
    }); 
});

The Problem is when I click on the a tag on the posts that rendered using infinite scroll it semes like the link do nothing