javascript is unable to working on infinite scroll

I have a website which have multiple posts and each post have a like button with auto timeout modal popup. When scrolling down, more posts loaded with infinite.js. Which load the posts. The problem : In the first page the like button with timeout modal popup does work. But when the posts load in infinitely the modal popup is not working anymore.

<main role="main" class="container infinite-container">
<div class="row">
    <div class="col-sm-6 infinite-item">
        <article class="content-section">
            <div class="post-bar">
                <button href="" class="like2-btn btn-outline-dark">
                  <i class="fas fa-user"></i>
                </button>
                <!-- modal-->
                 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                     post liked
                                </div>
                            </div>
                        </div>
                <------>
                <p class="text">Tab the button for write a post</p>
            </div>
        </article>
    </div>
 </div>

{% if page_obj.has_next %}
        <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
    {% endif %}
    <div class="col-sm-6">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/infinite.min.js" type="text/javascript"></script>
    <script>
    var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0],
        handler: function(direction) {

    },
    offset: 'bottom-in-view',
    onBeforePageLoad: function () {
    $('.spinner-border').show();
    },
    onAfterPageLoad: function () {
    $('.spinner-border').hide();
    }


    });
    $(document).ready(function(){
        $('.like2-btn').click(()=>{
            $('#exampleModal').modal('show');
            setTimeout(() => {
                $('#exampleModal').modal('hide');
            },1000);
        });
    });

    </script>

first it loads 10 posts after scrolling bottom down 10 posts loads again which is done by infinite.js I want to add the same modal popup function to every infinite container. But somehow its not working in the infinite container instead of the first page which is already loaded.

Answer

Have a look into event delegation. Basically, you won’t attach the listener to elements, but rather to the page and make your handler dependent on the event details.

So (in vanilla) it would be something like this:

document.addEventListener('click', e => {
  if(e.target.classList.contains('like2-btn') || e.target.closest('.like2-btn')) {
    // do sth...
  }
})

Advertisement

Answer