Run jQuery function on AJAX load except for initial page load-CodePudding

I have a filterable list that uses AJAX to update results. I am trying to add a simple JQuery function to scroll to the first item when a filter is applied. It works fine, except the scroll function runs on initial page load as well as after AJAX filtering. How can I run this only when the filters are updated?

jQuery( document ).ajaxComplete(function( event, request, settings ) {
  jQuery('html, body').animate({
        scrollTop: (jQuery('#td-top-of-list').offset().top - 200)
    }, 500);
});

Here is the page: https://galvestondiet.com/galveston-diet-recommended-physicians/

CodePudding user response：

This is on every ajax completed request on your page. You need to grab the completed event from the call when you load the list.

$.ajax({
    url: "https://app.asana.com/-/api/0.1/workspaces/",
    type: 'GET',
    dataType: 'json', // added data type
    success: function(res) {
        fillYourList(res);
        jQuery('html, body').animate({
            scrollTop: (jQuery('#td-top-of-list').offset().top - 200)
        }, 500);
    }
});

CodePudding user response：

Thanks for the help @benoit. The plugin author provided me with the completed AJAX event. Here is the working snippet...

    jQuery(document).ready(function( $ ){
        $( document ).on( 'jet-filter-content-rendered', function() {  // Completed event
            if($(window).width() > 767) { // Only scroll on tablet & desktop
                $([document.documentElement, document.body]).animate({
                    scrollTop: $("#top-of-physician-list").offset().top - 200
                }, 1000);  
            }
        });
    });