jQuery - Find and replace text, after body was loaded

Question

I received some amazing help from others, concerning finding and replacing text with jquery.

The code below will find the word: "Subject:" and replace it with "Name:"

$("*").each(function () { 
   if ($(this).children().length == 0) { 
      $(this).text($(this).text().replace('Subject:','Name:')); 
   } 
});

And this works wonderfully.

The only thing I'm running into issues with is replacing text that is loaded after the page loads.

I do have some javascript functions that are displaying data from the server, but only after the page has loaded all elements. For example, a user selects a value from a dropdown that initiates an event to load a list of products from the database.

I format some of those products like this:

Granny Smith Apples Price: x.xx per pound Nutritional facts....

I will only want to find a replace the word "Price:", and possibly replace it with "Cost:".

But as I mentioned, that data has not been loaded yet. And only displays after the user selects "Granny Smith Apples" from the dropdown menu.

Is this a limit I have to live with?

Solution 1

You could try attaching an event to the ajaxStop event as well as on load:

function replaceText() {
    var jthis = $(this);
    $("*").each(function() { 
        if(jthis.children().length==0) { 
            jthis.text(jthis.text().replace('Subject:', 'Name:')); 
        } 
    });
}
$(document).ready(replaceText);
$("html").ajaxStop(replaceText);

Solution 2

Call your function from the $(document).ready() callback like this

$(document).ready(function() { replace_stuff(); } );