Skip to main content

Run JavaScript after AJAX filter updates

Why this matters​

When filters update the Archive Loop over AJAX, newly injected HTML is not visible to scripts that ran only on initial page load. You may need to re-initialize galleries, sliders, lazy-load images, or custom UI after each filter change.

WPEnhanced Ajax Filter Blocks fires a divi_filter_completed event when a filter request finishes and the loop HTML has been updated.

Quick example (jQuery)​

jQuery(document).on('divi_filter_completed', function () {
  // Re-init your scripts here
  console.log('Filter update complete');
});

Enqueue your script on pages that use filters, after the plugin's front-end scripts (dependency on jQuery if you use the pattern above).

What to put in the handler​

Typical tasks after filter completion:

  • Re-bind lightbox or gallery plugins on new loop items
  • Re-run lazy-load image observers
  • Refresh WooCommerce variation forms if product cards were replaced
  • Update custom analytics or tracking
  • Re-initialize third-party carousel/slider widgets

Keep handlers idempotent—the event fires on every filter, pagination, and load-more update.

Load More and infinite scroll​

The same divi_filter_completed event fires after Load More and infinite scroll append results (Pro). One listener covers standard filters and load-more modes.

Avoid duplicate listeners​

Register the listener once (e.g. on DOMContentLoaded), not inside the handler itself. Use .off() before .on() if your script may load twice.

More detail for developers​

For event timing, compatibility notes, and related globals, see JavaScript hooks.

What's next​