Execute JavaScript After Ajax Load With jQuery

When part of a page is loaded with Ajax, for example a product grid that loads more items or filters its results, changes your script made on page load don’t apply to the new markup. To run your JavaScript again after an Ajax load, use jQuery’s ajaxComplete event: it fires every time an Ajax request finishes.

In this example, the code sets the text of the Quick View links in the product widgets of Essential Addons for Elementor (the eael- classes) to Quick View. Add it to your theme’s JavaScript file, after jQuery has loaded.

$( document ).ajaxComplete(function( event,request, settings ) {
	$("li.eael-product-quick-view a").text('Quick View');
});

How the JavaScript runs after each Ajax load

• $( document ).ajaxComplete() runs the function after every jQuery Ajax request on the page completes, whether it succeeded or failed.
• $("li.eael-product-quick-view a") finds the links, and .text() replaces their text. Change the selector and the text for your own elements.
• event, request and settings aren’t used here, but settings.url tells you which request finished if you only want to react to one of them.

A few things to keep in mind:

• ajaxComplete only fires for requests made through jQuery, not for fetch() calls.
• It doesn’t run on the first page load. If the elements are already on the page, run the same line once on page load too.
• .text() replaces everything inside the link, including any icon element.
• In WordPress, jQuery runs in no-conflict mode and doesn’t define $, so use jQuery in its place (see fixing $ is not a function in WordPress).

Related articles

• rebinding WooCommerce cart buttons after an Ajax update: the same ajaxComplete technique on the cart page
• closing an Elementor popup menu on link click: another jQuery fix for an Elementor widget