I have a script that runs 95% of the time perfectly but the other 5% of the time the buttons contents are missing. The script is run on every page and turns every div with the class 'button' into a button.
var button_img = 'button-'+colour+'-'+size;
var butt_id = $(this).text().toLowerCase().replace(/ /g,'_');
var placeholder = $(this).removeClass("button").addClass("button_text").parent("a").html();
var html = '\
<div id="b_'+butt_id+'" class="button_cont'+center+'" style="width:'+width+'px;">\
<div class="layers">\
<div class="button_img" style="height:'+height+'px; background:url(images/button/'+button_img+'.png);">\
<img src="images/button/'+button_img+'-l.png" class="left" />\
<img src="images/button/'+button_img+'-r.png" class="right" />\
</div>\
'+placeholder+'\
</div>\
</div>\
';
$(this).replaceWith(html);
on the 5% of the time it does not run correctly the button is generated but the var placeholder outputs null.... The only thing I can think is that var placeholder takes a long time to generate so sometimes var html completes before var placeholder finishes ... is that possible :s
The script is run when document is ready so its not that... also its worth noting that out of say 10 buttons on a page one might not load... (my point being if one fails it does not effect the others) and if the page is reloaded then that button will work.
EDIT:
a typical button is <a href="somelink"><div class="button">the button text</div></a>