AJAX场景下JQuery函数ReInitStockColor执行失败求助

It sounds like your issue boils down to timing: when your ReInitStockColor function runs initially, the AJAX-loaded <span> elements (with "In Stock", "Due", etc.) haven't been added to the DOM yet. That's why running it in the browser console works later—by then, the content has finished loading.

Here are a few reliable fixes you can try:

1. Hook into AJAX Completion Events #

Since your page uses AJAX to load product data, you can tie your styling logic to jQuery's global ajaxComplete event, which fires every time an AJAX request finishes. This ensures your code runs right after new content is added to the page:

// Replace your current function call with this
$(document).ajaxComplete(function() {
  $("span:contains(In Stock)").css({"font-weight": "bold", "color": "#00BF00"});
  $("span:contains(Due)").css("color", "#FF0000");
  $("span:contains(Made)").css({"font-weight": "bold", "color": "#00BF00"});
});

I also cleaned up the CSS property assignments to use object syntax for multiple styles—it's more concise and easier to maintain.

2. Use a MutationObserver for DOM Changes #

If the site doesn't trigger standard AJAX events (or you want a more robust solution), a MutationObserver will watch for changes to the DOM and run your styling code whenever new elements are added:

function updateStockColors() {
  $("span:contains(In Stock)").css({"font-weight": "bold", "color": "#00BF00"});
  $("span:contains(Due)").css("color", "#FF0000");
  $("span:contains(Made)").css({"font-weight": "bold", "color": "#00BF00"});
}

// Run once on initial load (in case some content is already rendered)
updateStockColors();

// Set up observer to watch for new elements in the product listing container
// Replace '.product-listing-container' with the actual parent element holding your radiators
const observer = new MutationObserver(updateStockColors);
observer.observe(document.querySelector('.product-listing-container'), {
  childList: true,
  subtree: true
});

You'll need to replace .product-listing-container with the actual selector for the parent div that gets updated with AJAX content—you can find this easily using your browser's dev tools by inspecting one of the product items.

3. Check for Custom AJAX Load Events #

Some e-commerce sites fire custom events when product listings finish loading. For example, if the site uses a custom solution, it might trigger an event like productListLoaded. You can listen for these events like this:

$(document).on('productListLoaded', function() {
  updateStockColors();
});

To find if such events exist, you can monitor the browser's console for event logs, or look through the site's existing JavaScript code for custom event triggers.

Why Your Original Code Didn't Work #

Your original ReInitStockColor function wraps the code in $(function() { ... }), which runs when the initial DOM is fully loaded—but before any AJAX content is fetched and rendered. By the time the product status spans are added to the page, your function has already finished executing, so it doesn't find any elements to style.

内容的提问来源于stack exchange，提问作者MattSMR