Waypoint and Inview jquery. How to Fix DOM Issue

Question

I'm trying to customize a wordpress plugin called wp post listing. I want to target the #basic-waypoint-cyberwrath that wraps the load more button because the plugin doesn't have an automation. It needs to manually click the load more button in which I don't like it.

This is the code that I have got so far for inview:

var inview = new Waypoint.Inview({
    element : $('#basic-waypoint-cyberwrath')[0],
    enter : function(direction) {
        //alert('Enter triggered with direction ' + direction)
    },
    entered : function(direction) {
        //alert('Entered triggered with direction ' + direction)
        $('.wpp_loadmore_pager').click();
    },
    exit : function(direction) {
        //alert('Exit triggered with direction ' + direction)
    },
    exited : function(direction) {
        //alert('Exited triggered with direction ' + direction)
    }
});

When I use the alert function. It alerts very well in inview no matter how many times I scrolled to the ID. It keeps firing the alert function. But when I used the click function. It only fire once because the #basic-waypoint-cyberwrath was newly dynamically loaded each time when you click the load more button. This is the closest code that I have done so far. .

And this is the code that I got so far for waypoint:

var $fusionheader = $('#basic-waypoint-cyberwrath');
$fusionheader.waypoint(function(direction) {
    if (direction === 'down') {
        // do stuff
        //alert('I am going down');
        $('.wpp_loadmore_pager').click();
    }
    jQuery.waypoints('refresh');
}, {
    offset : '90%'
});

I already tried almost everything. I dont know anymore what am I missing here. Both are good when scrolling down for the first time and then triggers when it sees the #basic-waypoint-cyberwrath but it doesn't trigger anymore for round 2 and so on the load more button in order to see the other post listings.

I even tried a for loop statement but still no luck:

var discreteElements = document.getElementById('basic-waypoint-cyberwrath');
for (var i = 0; i < discreteElements.length; i++) {
    new Waypoint.Inview({
        element : this,
        enter : function(direction) {
        },
        entered : function(direction) {
            //animatelettering.textillate('in')
            $('.wpp_loadmore_pager').click();
        },
        exit : function(direction) {
            //animatelettering.textillate('out')
        },
        exited : function(direction) {
        }
    });
};

Please help.

Answer 1

You'll need to track down what is actually causing the loading of those posts (probably a function) and re-attach the handler to the click event there. You can accomplish this by using

$(".container").on("click", ".wpp_loadmore_pager", function() {
    //load_function();
});

Most likely .wpp_loadmore_pager has a click event attached to it somewhere and it's running some function (load_posts(), get_posts(), etc). In that function you'll probably see the code which recreates that button. That is where you'll need to reattach the handler.